React useGetSet Hook

Introducción

En este laboratorio, exploraremos el uso del hook useGetSet en React. Este hook nos permite crear un valor con estado y recuperar o actualizar su valor utilizando funciones getter y setter respectivamente. Al final de este laboratorio, tendrás una mejor comprensión de cómo utilizar este hook en tus aplicaciones React.

Skills Graph

React useGetSet Hook

index.html y script.js ya se han proporcionado en la máquina virtual. En general, solo es necesario agregar código a script.js y style.css.

Este fragmento de código define un hook personalizado de React llamado useGetSet que crea un valor con estado y devuelve un par de funciones para obtener y establecer su valor. El componente Counter utiliza este hook para implementar un incremento retardado de un contador que se muestra en un botón.

const useGetSet = (initialState) => {
  const stateRef = React.useRef(initialState);
  const [, update] = React.useReducer(() => ({}), {});

  const getState = React.useCallback(() => stateRef.current, []);
  const setState = React.useCallback((newState) => {
    stateRef.current = newState;
    update();
  }, []);

  return [getState, setState];
};

const Counter = () => {
  const [getCount, setCount] = useGetSet(0);
  const onClick = React.useCallback(() => {
    setTimeout(() => {
      setCount(getCount() + 1);
    }, 1000);
  }, [getCount, setCount]);

  return <button onClick={onClick}>Count: {getCount()}</button>;
};

ReactDOM.createRoot(document.getElementById("root")).render(<Counter />);

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicitaciones! Has completado el laboratorio del hook React useGetSet. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.