React useDelayedState Hook

Introdução

Neste laboratório, aprenderemos como usar o hook useDelayedState em React para atrasar a criação de um valor com estado até que uma determinada condição seja atendida. Este hook é útil quando precisamos esperar que dados ou props carreguem antes de criar um valor com estado, e pode ajudar a melhorar o desempenho da nossa aplicação. Através de exemplos práticos, veremos como este hook pode ser implementado e como pode ser usado para atualizar valores com estado em nossos componentes React.

React useDelayedState Hook

index.html e script.js já foram fornecidos na VM. Em geral, você só precisa adicionar código a script.js e style.css.

Para atrasar a criação de um valor com estado até que uma condição seja atendida, siga estes passos:

1. Use o hook useState() para criar um valor com estado contendo o state real e um booleano, loaded.
2. Use o hook useEffect() para atualizar o valor com estado se a condition ou loaded mudar.
3. Crie uma função, updateState, que só atualiza o valor state se loaded for verdadeiro (truthy).

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];
};

Aqui está um exemplo de como usar o 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 => setSelectedBranch(e.target.value)}>
        {branches.map((branch) => (
          <option key={branch} value={branch}>
            {branch}
          </option>
        ))}
      </select>
    </div>
  );
};

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

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório React useDelayedState Hook. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.