Start by cleaning your room

We know by now, that useEffect merely states the initial and re-render conditions of a component, an integral part is to also mention what to run before a new re-render again, which could be specified using a return to do cleanup.

Now your own functions, can be turned to customHooks, with a prefix of use, and then you could pass arguments you could not before. This allows for even hook reusability in other lines of code, after defining it the first time. A true React practice that is recycling and repurposing.

Every part goes through a lifecycle, just like us.

These cycles are split into three main parts that is useful to keep in mind when making your very own app, mounting refers to the first render ever, then comes the updating part that re-renders the component at every state change and ending up with unmounting that deletes the whole HTML component from existence, unless mounted again to start a new cycle.

useEffect by itself is easy.

And too simple to be much of use. The callbacks help define two parts, the timing of the firing, and the condition, by usinguseLayoutEffect the timing becomes before any renders, and by adding array dependencies [dep1, dep2 ..] at the end of the callback as a condition will ensure nothing happens unless all elements have been changed.

Lessons learned

Functional components as we have noticed, have much less code than class components, and with hooks its almost possible to replace classes in all files.. and maybe the whole internet too.. forever.

Vocabulary of the day

• State hook: is a change in visual, that depends on the change of a defined state variable using useState.
• Effect hook: is another change in visual that depends on other conditions, that might be state or at first re-render and before deletion.
• Reducer hook: is the ultimate answer to complex state hooks, simply replace useState with const [state, dispatch] = useReducer(reducer, initialArg, init);, the how will be worked on this lab.