Hook useSet do React

Introdução

Neste laboratório, exploraremos como criar um objeto Set com estado (stateful) em um componente React usando o hook useSet. Este hook oferece uma maneira simples e eficiente de manipular um conjunto de valores em um componente e pode ser personalizado para atender às necessidades específicas da aplicação. Ao final deste laboratório, você terá uma melhor compreensão de como implementar e usar este poderoso hook em seus projetos React.

Hook useSet do React

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

Esta função cria um objeto Set com estado e um conjunto de funções que podem manipular o estado.

Para usar esta função:

• Chame useState() e o construtor Set para criar um novo Set a partir do initialValue.
• Use useMemo() para criar um conjunto de funções não mutáveis que podem manipular a variável de estado set. Use o setter de estado para criar um novo Set sempre.
• Retorne tanto a variável de estado set quanto as actions criadas.

Aqui está um exemplo de implementação desta função:

const useSet = (initialValue) => {
  const [set, setSet] = React.useState(new Set(initialValue));

  const actions = React.useMemo(
    () => ({
      add: (item) => setSet((prevSet) => new Set([...prevSet, item])),
      remove: (item) =>
        setSet((prevSet) => new Set([...prevSet].filter((i) => i !== item))),
      clear: () => setSet(new Set())
    }),
    [setSet]
  );

  return [set, actions];
};

Aqui está um exemplo de uso desta função:

const MyApp = () => {
  const [set, { add, remove, clear }] = useSet(new Set(["apples"]));

  return (
    <div>
      <button => add(String(Date.now()))}>Add</button>
      <button => clear()}>Reset</button>
      <button => remove("apples")} disabled={!set.has("apples")}>
        Remove apples
      </button>
      <pre>{JSON.stringify([...set], null, 2)}</pre>
    </div>
  );
};

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

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 do Hook useSet do React. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.