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?
Filtros CSS
O suporte a filtros CSS foi lançado recentemente nos nightlies do WebKit. Filtros CSS fornecem um método para modificar a renderização de um elemento DOM básico, imagem ou vídeo. Os filtros CSS permitem desfocar, distorcer e modificar a intensidade da cor dos elementos. Vamos lá…
Posição de contorno do elemento de controle com deslocamento de contorno
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…