Frontend Developer (React Native, NextJs, Typescript) • 5+ YOE • Code Reviewer at Dicoding
Four years ago, I learned React Hooks for the first time. Back then, I was moving from class components to function components, and honestly, I felt lost. How to store data? How to run code when the screen loads? It was messy. Then I started learning React Hooks one by one. First, useState and useEffect. They helped me store data and call APIs. But soon I saw my components re-rendering too many times. That's when useCallback and useMemo saved me. Then useRef to focus an input without making the page refresh again. And useReducer for when my state got too complex. Step by step, my code became cleaner, faster, and easier to understand. The biggest relief came when I learned useContext, no more passing props through many levels of components. It felt so good. I also had a strange layout bug, until I found useLayoutEffect, which runs code right before the browser paints the screen. Also don't forget useId, before this, I made unique IDs manually or install 3rd party package like uuid from npmjs. I mostly use them in every project. If you're still confused about React Hooks, take a look at the image below. Who knows? One hook you rarely use might be the answer to your problem. By the way, these hooks are also fundamental questions that technical interviewers often ask when you apply for a React role. So learning them well can help you both at work and in job interviews. 😃 #ReactJS #ReactHooks #FrontendDeveloper #InterviewPrep
Very nice illustration, with modern framework data fetching using useEffect isn’t recommended
Sajid Bashir
4d
Clean explanation Understanding hooks deeply not only improves performance but also makes component design much more predictable and scalable.
Thank you for sharing it, the last one useId() was new to me 🤨
Afifa Ansari
5d
Good one
Great! Thank you for the picture
useNavigator()
Haris Ali
3d
The jump from class components really felt like a hurdle! Focusing inputs with useRef without triggering re-renders is a clever trick, vital for optimizing React apps. The first time
useRef is honestly a lifesaver. It has saved me from so many infinite re-render loops across all my projects! Also, wrapping my head around useEffect vs useLayoutEffect took me forever when I first started. This sheet is super clean.