There's only two rules for React Hooks. First Rule, you don't talk about React Hooks. The second rule of React Hooks? You DO NOT talk about React Hooks.
The third rule of React Hooks:
Always call hook at the top level. Of course you can access their returns elsewhere. But you need to create them at the top of the function. It's important hooks are always created in the same order every time the function is called, as React does not store them by name, but by declaration order. If the order of the hook creation is dynamic, your hooks will break.
The fourth rule of React Hooks:
Never call hooks from vanilla JS functions. You can call them in react function components, or you can call Hooks from custom Hooks.
The fifth rule of hooks: always pass a second argument to useEffect. UseEffect is ready hooks version of component did mount. It will run once upon the component mounting, just like component did mount. Assuming you remember to pass a second argument of an empty array. Leaving out that second argument will leave component did mount rerendering on a loop infinitely though. Beware. You can also include values you want to watch in the array. If you do, useEffect will watch those values and run again on any value change.
The sixth rule of hooks: if useEffect has a return value, that will be your componentdidunmount. So return a function in use effect and you can achieve your dreams of component did unmount in your functional react component.
The seventh rule of react hooks: prefer reacts useCallback function over anonymous functions for use with useEffect and other hook related elements. UseCallback provides built in stability and compatibility with react hooks. It can protect your hooks from unnoticed side effects and other dangers.
The eight rule of hooks: check the included react hooks before creating your own. This rule really applies to many items in coding. I’ll never forget the first time I was coding in reactjs. I built my own version of component did mount. Immodestly I had seen how running something once upon the loading of the component but not on every refresh could be invaluable and immediately started designing a function to accomplish it. When I finished the project I was taking with two friends. One had experience and the other was asking questions about using react for the first time. My friend told him to use componentdidmount which I had never heard of before. I explained, that no, I had simply built a function to run once on render and he should do the same. My experienced friend said yes! He should use component did mount. I asked what are you talking about. And he asked, wait. You didn’t use component did mount. After a long conversation he realized I had gone through the trouble of building an entire function that react supplies for free. We had a good laugh and I learned something. Don’t build a custom functionality before checking if it already exists. This goes just as much for hooks.
The ninth rule of hooks: use hooks. Hooks are fantastic. They’re most coders dream and fulfill the promises of dry development you will right far less code using react hooks than you would with class react components while achieveing the same results. Not only will you write less code though. But as you realize the power of hooks you’ll be able to write simpler code to accomplish previously complex or infuriating challenges. Particularly fantastic is their ability to enable two seperate react components to communicate. Betweeen reacts built in reducer hooks and the way passing hooks around is so much easier than the previous callbacks you can accomplish so much more than before.
Top comments (0)