React Component Anatomy
Senior Fullstack Developer, working since 3yrs in react
Article is targeted towards devs with working knowledge in react
Let us go through the Anatomy of a React functional component, Here is a simple counter that logs the count when user changes it.
The component function
The function itself runs everytime a state variable is updated via the setter (second item in the array returned by the useState call). The function also runs when a prop passed to it changes. (shallow comparison is made, so if a prop is an object, its reference should changesearch for 'reference vs value in javascript')
The State (Refer to beta.reactjs.org docs)
State variables are not intended to be like a javascript variable. They represent a snapshot of that state, which means the value of count is 1 since the last time the component function ran (it is called whenever a state/prop is changed). So, you can't expect to change count by assigning a new value to it, and use it in the subsequent lines of code. Rather, you have to update its value with setCount, and expect that the function is called again, and this time the count(which is just a snapshot), holds the newer value, and that is when your ui starts showing the newer value. Its the useState() that returns the new snaphot, everytime the component function is called over and over.