Hooks
You will replace the lifecycle functions with Hooks. The status too. Therefore, read What are React Hooks? if you have any questions about them in general.
useEffect
The hook useEffect
can behave in a similar way to componentDidMount
and componentWillUnmount
. Can because it has an array of dependencies, which indicates when the callback passed should be run again.
The hook runs after each render, but the callback runs only if something within the dependency array is modified. So, if the array is empty []
, will function as the componentDidMount
.
In the useEffect
, we can also return a callback to "clean" the effect. React will execute the clean up when the component disassembles. However, as I mentioned earlier, the useEffect
is executed in all surrender, not just once. This is why React also cleans the effect of previous renders before performing the effect again on the next render.
In summary, the clean up is executed before the effect is triggered again. If the dependency array is empty, the behavior will be like the 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 that I have declared the function handleChange
within the useEffect
, since it is only used there. Otherwise, you would need to declare out and use as hook dependency.
In that case, you could make use of the useCallback
so that React doesn’t create a new function reference for each rendering. I talk a little bit about this in that reply. The code would look like this:
function Component() {
const handleChange = useCallback(() => {
this.setState(SelectionToolbarStore.getState());
}, []);
useEffect(() => {
SelectionToolbarStore.addChangeListener(handleChange);
return () => {
SelectionToolbarStore.removeChangeListener(handleChange);
}
}, [handleChange]);
return null;
}
This code will work the same way as the other, with the dependency array empty. This is because the function reference will be created only once, thanks to the useCallback
, which will be at first render. It is important to understand this.
useState
The initial value of useState
must be declared as informed in the question. The initial value is set in the first render. Can be an import, can be passed by prop, can be a constant.
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;
}
I don’t know where it comes from
SelectionToolbarStore
, but what you suggested seems right. What’s the problem in theuseState
? Your question is, then, only aboutcomponentDidMount()
andcomponentWillUnmount()
?– Rafael Tavares
The
SelectionToolbarStore
comes from my teachers. The question is aboutcomponentDidMount()
andcomponentWillUnmount()
yes. Because although the site did not break the functionality I wanted it to occur it does not happen– Pedro Barros