Os hooks são essenciais para o padrão de componente funcional no React. Uma comparação lógica frequente com class foi a comparação de um componente prop anterior com um valor atual prop por meio de métodos de ciclo de vida. Então, qual é um padrão fácil para duplicar as comparações de valores anteriores em componentes funcionais?

O useRef e useEffect permitem gerenciar essa mesma funcionalidade em componentes funcionais por meio de um gancho personalizado — usePrevious:

import { useEffect, useRef } from 'react';

export function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
}

// Usage
export function MyComponent(props) {
  const { name } = props;
  const previousName = usePrevious(name);

  if(name != previousName) {
    // Do something
  }
}

Eu adoro isso usePrevious só porque frequentemente me esqueço de usar o gancho .current e isso ajuda a evitar algum código padrão. O que o senhor pensa sobre esse padrão? O senhor tem algum gancho personalizado em que confia?

  • Controle a posição do contorno do elemento com outline-offset

    Recentemente, trabalhei em um projeto que apresentava tabelas que podiam ser navegadas pelo teclado, portanto, obviamente, usar o contorno de células por meio do tradicional tabIndex=0 e contornos de elementos foi uma parte importante para permitir que o usuário navegasse de forma rápida e inteligente. Infelizmente, encontrei um bug no Firefox 3.6…

  • Fonte redigida

    Na época em que eu criava sites para clientes, uma das muitas coisas que me frustravam era a transferência inicial do design. Era sempre assim: Trabalhar duro para incorporar as ideias do cliente, sonhar com um design incrível. Criar esse design, usando texto Lorem Ipsum Enviar o conceito inicial do design para o cliente…