Gist: React Hooks

I hope React community is very much excited about the release of Hooks. I too exploring the React Hooks and really surprised with this functionality.

Here are some of the points that I have learned and thought it is good to write this as a post.

• Use hooks inside React functions.
• Use hooks at the top level of the function. React don’t allow to initialize hooks conditionally and inside loops.
• Class based approach is still alive. Introducing hooks does not mean class based component initialization is going to drop. React core team confirmed that class approach will not removed and it will work side by side with hooks without any extra configuration.
• Custom hooks should starts with use word. React core team enforces this convention since hooks are just JavaScript functions and they need to differentiate hooks from normal functions.
• Life cycle methods componentDidMount and componentDidUnmount can be replaced with useEffect hook.
• Use in-built hooks(see resources) provided by React team. I can bet that we are going to see many custom hooks in the upcoming days however it’s good to check the default ones before using custom hooks.

Resources

https://reactjs.org/docs/hooks-state.html#whats-a-hook

https://reactjs.org/docs/hooks-effect.html

[Video by Kathryn Middleton]https://developers.facebook.com/videos/2019/intro-to-react-hooks/