Los Hooks y el Context de React han transformado la gestión del estado y el intercambio de datos en aplicaciones React. Con la introducción de los hooks en la versión 16.8 en 2019, los desarrolladores obtuvieron la capacidad de utilizar estado y métodos de ciclo de vida dentro de componentes funcionales, lo que permite un código más conciso y legible.

Por otro lado, Context proporciona una forma simplificada de compartir datos entre componentes sin la necesidad de prop drilling. Se explorará la poderosa sinergia entre los hooks de React y Context, mostrando su potencial combinado para simplificar la gestión de estados complejos y facilitar el flujo de datos a lo largo del árbol de componentes.

En los próximos capítulos, analizaremos en detalle lo siguiente:

Hook de estado

useState permite que un componente conserve y recupere información (por ejemplo, la entrada del usuario). Por ejemplo, un componente de formulario puede utilizar el estado para preservar el valor de entrada, mientras que un componente de galería de imágenes puede depender del estado para mantener el índice de la imagen seleccionada.

function Form() {
  const [value, setValue] = useState('');
  // ...
}

Hook de referencia

useRef proporciona un medio para que un componente conserve información que no afecta el renderizado, como un nodo DOM o un ID de temporizador. A diferencia del estado, modificar una referencia no desencadena un nuevo renderizado del componente. Las referencias funcionan como una "vía de escape" del paradigma típico de React y resultan útiles al interactuar con sistemas ajenos a React, como las API nativas del navegador.

function Form() {
  const inputRef = useRef(null);
  // ...
}

Hook de efecto

useEffect permite que un componente establezca conexiones y se sincronice con sistemas externos, incluyendo la interacción con redes, la manipulación del DOM del navegador, la gestión de animaciones, la integración de widgets desarrollados con diferentes bibliotecas de UI y la incorporación fluida de código ajeno a React.

function Animation({ animationId }) {
  useEffect(() => {
    const animation = createAnimation(animationId);
    animation.start();
    
    // Cleaning up the animation when the component unmounts
    return () => animation.stop();
  }, [animationId]);
  // ...
}

Hook de memoización

useMemo mejora el rendimiento del renderizado al minimizar cálculos innecesarios. Por ejemplo, se puede indicar a React que reutilice un cálculo almacenado en caché o que evite volver a renderizar si los datos no han cambiado desde el renderizado anterior.

function NewspaperList({ data, filter }) {
  const filteredData = useMemo(
    () => performFiltering(data, filter),
    [data, filter]
  );
  // ...
}

Hook de contexto

useContext permite que un componente acceda a información de ancestros lejanos sin necesidad de pasar las props. Facilita que el componente de nivel superior en la aplicación transmita el tema de la interfaz de usuario actual a todos los componentes descendientes, sin importar su profundidad en el árbol de componentes.

function Section() {
  const theme = useContext(ThemeContext);
  // ...
}