2025-01-13
6075
#react
Ohans Emmanuel
295
Jan 13, 2025 ⋅ 21 min read

React Hooks cheat sheet: Best practices with examples

Ohans Emmanuel Visit me at ohansemmanuel.com to learn more about what I do!

Recent posts:

8 Reasons Your Next.js App Is Slow — And How To Fix Them

8 reasons your Next.js app is slow — and how to fix them

You don’t need to guess what’s wrong with your Next.js app. I’ve mapped out the 8 biggest performance traps and the fixes that actually work.

Chizaram Ken
Jun 20, 2025 ⋅ 16 min read
how to use the Interest Invoker API for better, more accessible UX

How to use the Interest Invoker API for better, more accessible UX

Explore how to use Google’s new experimental Interest Invoker API for delays, popovers, and smarter hover UX.

Emmanuel John
Jun 19, 2025 ⋅ 7 min read
How To Build And Deploy A Web App With Bolt.new

How to build and deploy a web app with Bolt

Bolt.new revolutionizes how you build and deploy web apps with no-code development and seamless AI integration.

Isaac Okoro
Jun 19, 2025 ⋅ 8 min read
how to get the most out of Cursor

Frontend devs: Here’s how to get the most out of Cursor

Learn how to get the most out of Cursor AI — one of the hottest tools in AI-assisted coding, with practical workflows and underrated features.

Isaac Okoro
Jun 18, 2025 ⋅ 5 min read
View all posts

10 Replies to "React Hooks cheat sheet: Best practices with examples"

  1. Thanks, some interesting points on here. I’m currently building a single page app using React and WordPress and the hooks are proving very useful. I’m having problems persisting useState data with a route change, still looking for clues..!

  2. Nice! Typically, you’d have to centralize the data you want to share across routes – either via a centra store like redux’, or a central context object, or perhaps via the browser’s LocalStroage. You’ve got many options and the best for your specific use case depends on the application you’re building.

  3. I have a question: The official docs (and every blog post I’ve seen about hooks) says that fetching data should be done in useEffect. Changing the DOM “manually” with a reference to an element should be done in useLayoutEffect to avoid flicker. This seems like a contradiction to me. When you fetch data, 99% of the time you’re going to display some of that data in the UI. So you are indirectly (not manually with a reference to an element) changing the DOM. So, you’ll have a flicker if you do the fetch/state change in useEffect. So, why don’t all the docs say that fetching data should be standardly done in useLayoutEffect?

  4. Great article! I’m trying to set a random number to a color state using hooks:
    const COLOR = function() {
    return ‘#’ + Math.floor(Math.random() * 16777215).toString(16);
    };
    const [bgColor, setBgColor] = useState(COLOR);
    The value should be different every time the page is refreshed. In dev mode it’s working but when I build the app, the value become static. Would use “useEffect” for that case?

  5. Really good article! Thanks for that! Just noticed that in the Skipping effects (array dependency) section, the array that is passed to useEffect doesn’t have the randomNumber in the code example.

  6. I saw and learnt react with functional components, is this tutorial old react or advanced? As I am a beginner and i cannot point or find difference.

Leave a Reply