Hook useDelayedState de React

Introducción

En este laboratorio, aprenderemos a usar el hook useDelayedState en React para retrasar la creación de un valor con estado hasta que se cumpla una cierta condición. Este hook es útil cuando necesitamos esperar a que se carguen datos o props antes de crear un valor con estado, y puede ayudar a mejorar el rendimiento de nuestra aplicación. A través de ejemplos prácticos, veremos cómo se puede implementar este hook y cómo se puede usar para actualizar valores con estado en nuestros componentes React.

Skills Graph

Hook useDelayedState de React

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.

Para retrasar la creación de un valor con estado hasta que se cumpla una condición, siga estos pasos:

1. Utilice el hook useState() para crear un valor con estado que contenga el estado real y un booleano, loaded.
2. Utilice el hook useEffect() para actualizar el valor con estado si cambia la condición o loaded.
3. Cree una función, updateState, que solo actualice el valor de estado si loaded es verdadero.

const useDelayedState = (initialState, condition) => {
  const [{ state, loaded }, setState] = React.useState({
    state: null,
    loaded: false
  });

  React.useEffect(() => {
    if (!loaded && condition) setState({ state: initialState, loaded: true });
  }, [condition, loaded]);

  const updateState = (newState) => {
    if (!loaded) return;
    setState({ state: newState, loaded });
  };

  return [state, updateState];
};

A continuación, se muestra un ejemplo de cómo utilizar el hook useDelayedState:

const App = () => {
  const [branches, setBranches] = React.useState([]);
  const [selectedBranch, setSelectedBranch] = useDelayedState(
    branches[0],
    branches.length
  );

  React.useEffect(() => {
    const handle = setTimeout(() => {
      setBranches(["master", "staging", "test", "dev"]);
    }, 2000);
    return () => {
      handle && clearTimeout(handle);
    };
  }, []);

  return (
    <div>
      <p>Selected branch: {selectedBranch}</p>
      <select onChange={(e) => setSelectedBranch(e.target.value)}>
        {branches.map((branch) => (
          <option key={branch} value={branch}>
            {branch}
          </option>
        ))}
      </select>
    </div>
  );
};

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

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 useDelayedState de React. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.