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:

Gemini CLI tutorial — Will it replace Windsurf and Cursor?

Gemini CLI tutorial — Will it replace Windsurf and Cursor?

Discover how to use Gemini CLI, Google’s new open-source AI agent that brings Gemini directly to your terminal.

Chizaram Ken
Jul 10, 2025 ⋅ 8 min read
React & TypeScript: 10 Patterns For Writing Better Code

React & TypeScript: 10 patterns for writing better code

This article explores several proven patterns for writing safer, cleaner, and more readable code in React and TypeScript.

Peter Aideloje
Jul 10, 2025 ⋅ 11 min read
A Guide To Wrapper Vs. Container Classes In CSS

A guide to wrapper vs. container classes in CSS

A breakdown of the wrapper and container CSS classes, how they’re used in real-world code, and when it makes sense to use one over the other.

Temitope Oyedele
Jul 7, 2025 ⋅ 10 min read
Stagehand and Gemini logos on a gradient background symbolizing AI web automation

How to build a web-based AI agent with Stagehand and Gemini

This guide walks you through creating a web UI for an AI agent that browses, clicks, and extracts info from websites powered by Stagehand and Gemini.

Elijah Asaolu
Jul 4, 2025 ⋅ 8 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