React hooks were introduced in the 16.8 version of React.
Since then, we’ve used them in a way or the other, whether it’s for storing a pice of state with the useState hook, or keeping your application in sync with an external system using the useEffect hook.. and the list goes on 😉
Some of the times, we can use
I made a post on LinkedIn about custom hooks sometime ago, and i had some comments by senior engineers telling me what wrong definition i gave for it, and what it actually does.
So I got challenged and decided to properly learn about it, so that i can teach everyone about it.
.. 💪 I mean, that’s one of my goals, but that’s by the way.
After the research, I made a big refactor on my projects cuz i noticed that i wasn’t using it properly.
I’ll be sharing exactly what i learned from that.
- When assigning names to a Custom Hook, it must start with “use”, e.g., useAuth, useCart.
- Custom Hooks are used to share stateful logic, but not the state itself.
You should reach for state management libraries if you wanna preserve any state. - Each call to a Custom Hook is independent from every other call to the same hook
- Custom Hooks are a part of the component body where it’s to be consumed so that you know how to manage re-renders.
…. that’s just how you should think of it 😉 - You should not extract a custom hook for every “litle duplicated” bit of code, some duplications are fine.
- use useEffectEvent to pass event handlers to a Custom Hook that contains a useEffect, so that you do not need to add then event handler as a part of the useEffect dependency array in a Custom Hook.
⚠️ This is still an experimental feature, so you must be on a specific version of React in order to use it.
That was a wrap.
⚡️I keep writing about the stuffs i learn daily. if you wanna learn, please follow along!
Read more:
How to Launch your startup in days and not weeks.
Everything you need to know about useState hook.
The end of useState and useEffect 😢
Initial Post on LinkedIn about Custom Hooks.
My projects
How to use useEffectEvent in React.