Understanding React hooks: useState, useEffect

useState:

useState is for managing the component states. Note setState is not synchronous method, so the state value will not be updated immediately after the setState method returns. However, eventually the state will be updated in the following rendering.

Although useState is asynchronous, it will be executed under the same context when the method is initially called. If it is called in an event handler, then the async state updating will be executed from the event handler's callstack. If it is called from function component's main rendering function, then the async state updating will also happen in the main rendering function.    

If setState is called in the function component's main method, then it will cause runtime errors if the setState method internally calls other component's setState method, and triggers the updating of other components. It is a good practice to always call setState method in event handler, and also do not call other component's setState method within current component's setState method.

useEffect:

useEffect's main purpose is providing a place to execute some code outside of the function component's main render function. This will speed up and simplify the logic in the main render function, in addition, certain functions are not allowed to be called from the function component's main render function, for example, calling other component's setState method within the main render function is not allowed. So useEffect is a good place to execute the code after the rendering is finished. 

useEffect can be configured by the second parameter to decide when its logic will be called, it can be called after every rendering (without providing second parameter), only after first rendering (providing an empty array in the second parameter), or whenever certain states or variables have been change (including the states or variables in the second array parameter).

When an event handler is included in the array of the second parameter of useEffect, whenever a new event handler is created during executing the component render function, the function of useEffect will always be called because the event handler has been updated. To avoid executing the body function of useEffect triggered by the new event handler, useCallback hook can be used to always return the same event handler object during different rendering of the same component. 

The function passed to useEffect may return a clean up function. The returned function will be called automatically when the component is removed from UI, or when next time the effect body function is called again.