The next topic we covered was passing props. Props are a way of sending info down from a parent to child component. The format I find most useful was {destructuring}. Conceptually, I see a child component as a function within a parent component – let me explain. The prop passed down is essentially a parameter for the child component , where the child component uses the data passed down. That is no different than a function, other than the fact that the child component has its own UI elements. Also, similar to a function, we have the ability to pass down callback functions, that is very useful when we talk about state.
Just as mentioned, hooks are one of the most useFul tools in React – the two main we dealt with are useState and useEffect. UseState allows us to store data and track the changes over the lifetime of the application. Another convenient aspect is that each change in react initiates a re-render to that component and any child component that is affected by state. The most important thing to think about state is how high up in the tree to store it. You must think which components will use that specific state and whether it needs to be stored in a parent component to be accessible by multiple child components.
The last topic I will be covering is useEffect. Effects are side effects, or an action that occurs without direct intervention from the user. The most common example is fetching, a useEffect is needed for the initial rendering of data, using an API, when the page loads. Use effects can also use dependancies. One dependency would be an empty array [ ] , which means only run on the initial load of a page. No dependency, just leaving the field blank will not set a limit on the amount of times the useEffect will run. The last thing discussed is variable dependency. This means any time there is a change to the data stored in a variable, the page will re-render.