1

Estou tentando fazer uma conversão de componente de classe para componente funcional.

O código que tenho é:

  constructor(props) {
    super(props);

    this.state = SelectionToolbarStore.getState();
  }

  componentDidMount() {
    SelectionToolbarStore.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    SelectionToolbarStore.removeChangeListener(this.handleChange);
  }

  handleChange = () => {
    this.setState(SelectionToolbarStore.getState());
  };
...

O que eu fiz até agora:

const SelectionToolbar = () => {
  // constructor(props) {
  //   super(props);

  //   this.state = SelectionToolbarStore.getState();
  // }

  componentDidMount() {
    SelectionToolbarStore.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    SelectionToolbarStore.removeChangeListener(this.handleChange);
  }

  handleChange = () => {
    this.setState(SelectionToolbarStore.getState());
  };

O que eu quero fazer agora é transformar esses componentDidMount() e componentWillUnmount() em Hooks, mas não estou sabendo como.

Também quero se converter this.state = SelectionToolbarStore.getState() para const [state, setState] = useState(SelectionToolbarStore.getState()); está correto, não sei se faz sentido.

2
  • Não sei de onde vem SelectionToolbarStore, mas o que você sugeriu parece certo. Qual o problema no código do useState? Sua dúvida é, então, somente sobre componentDidMount() e componentWillUnmount()? Commented 21/06/2021 às 14:45
  • O SelectionToolbarStorevem dos meus stores. A dúvida é sobre componentDidMount()e componentWillUnmount()sim. Porque embora o site não quebrou a funcionalidade que eu queria que ocorresse não acontece Commented 21/06/2021 às 15:09

1 Resposta 1

4

Hooks

Você substituirá as funções de ciclo de vida por hooks. O estado também. Por isso, leia O que são React Hooks? caso tenha alguma dúvida sobre eles de maneira geral.

useEffect

O hook useEffect pode ter um comportamento similar ao componentDidMount e componentWillUnmount. Pode porque ele possui um array de dependências, que indica quando o callback passado deve ser executado novamente.

O hook é executado após cada render, mas o callback é executado apenas se algo dentro do array de dependências for modificado. Então, se o array for vazio [], funcionará como o componentDidMount.

No useEffect, podemos também retornar um callback para "limpar" o efeito. O React executará o clean up quando o componente desmontar. Entretanto, como mencionei anteriormente, o useEffect é executado em todo render, não apenas uma vez. É por isso que o React também limpa o efeito de renders anteriores antes de executar o efeito novamente no próximo render.

Em resumo, o clean up é executado antes do efeito ser acionado novamente. Caso o array de dependências seja vazio, o comportamento será como o do componentWillUnmount.

function Component() {
  // O primeiro argumento é o callback a ser executado.
  // O segundo argumento é um array vazio, que fará com que o callback seja executado
  // apenas no primeiro render.
  useEffect(() => {
    const handleChange = () => {
      this.setState(SelectionToolbarStore.getState());
    };
    SelectionToolbarStore.addChangeListener(handleChange);

    return () => {
      // Aqui o clean up será executado apenas quando o componente for desmontar
      SelectionToolbarStore.removeChangeListener(handleChange);
    }
  }, []);

  return null;
}

useCallback

Note que eu declarei a função handleChange dentro do useEffect, já que ela é usada apenas ali. Caso contrário, precisaria declarar fora e utilizar como dependência do hook.

Nesse caso, poderia fazer uso do useCallback para que o React não crie uma nova referência da função a cada renderização. Eu falo um pouco sobre isso nessa resposta. O código ficaria assim:

function Component() {
  const handleChange = useCallback(() => {
    this.setState(SelectionToolbarStore.getState());
  }, []);

  useEffect(() => {
    SelectionToolbarStore.addChangeListener(handleChange);

    return () => {
      SelectionToolbarStore.removeChangeListener(handleChange);
    }
  }, [handleChange]);

  return null;
}

Esse código funcionará do mesmo jeito que o outro, com o array de dependências vazio. Isso porque a referência da função será criada uma única vez, graças ao useCallback, que será no primeiro render. É importante entender isso.

useState

O valor inicial do useState deve ser declarado como informado na pergunta. O valor inicial é estabelecido no primeiro render. Pode ser uma importação, pode ser passado por prop, pode ser uma constante.

import { valor1 } from './valor1';

function Component({ valor2 }) {
  const [val1, setVal1] = useState(valor1);
  const [val2, setVal2] = useState(valor2);
  const [val3, setVal3] = useState('Qualquer coisa');

  return null;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .