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:

Glowing 3D cube with the MediaPipe and React logos overlaid, symbolizing integration of AI and web development

How to build better AI apps in React with MediaPipe’s latest APIs

Learn how to integrate MediaPipe’s Tasks API into a React app for fast, in-browser object detection using your webcam.

Emmanuel John
Jul 17, 2025 ⋅ 10 min read
Vercel AI SDK logo on a 3D black grid background

How to build unified AI interfaces using the Vercel AI SDK

Integrating AI into modern frontend apps can be messy. This tutorial shows how the Vercel AI SDK simplifies it all, with streaming, multimodal input, and generative UI.

Ikeh Akinyemi
Jul 16, 2025 ⋅ 13 min read
how to prepare for a software engineering interview

How to prep for a software dev interview: Advice from a dev leader

Interviewing for a software engineering role? Hear from a senior dev leader on what he looks for in candidates, and how to prepare yourself.

Andrew Evans
Jul 16, 2025 ⋅ 12 min read
Next.js Real-Time Video Streaming: HLS.js And Alternatives

Next.js real-time video streaming: HLS.js and alternatives

Set up real-time video streaming in Next.js using HLS.js and alternatives, exploring integration, adaptive streaming, and token-based authentication.

Jude Miracle
Jul 15, 2025 ⋅ 19 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