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:

css vertical alignment

CSS vertical alignment: Best practices and examples

CSS has come a long way, making vertical alignment easier than ever. Learn about this concept and explore some of the best CSS vertical alignment techniques.

Facundo Corradini
Mar 23, 2025 ⋅ 8 min read
How to win clients with a Flutter web demo that feels real

How to win clients with a Flutter web demo that feels real

Use Flutter to build browser-based app demos that help clients visualize the product, speed up buy-in, and close deals faster.

Lewis Cianci
Mar 21, 2025 ⋅ 5 min read
TypeScript Is Getting A 10x Faster Compiler —Here’s What It Means For Developers

TypeScript is getting a 10x faster compiler — here’s what it means for developers

TypeScript’s new Go-based compiler offers 10x faster builds, improved CI/CD performance, quicker editor startup, and enhanced hot reload times.

Kapeel Kokane
Mar 21, 2025 ⋅ 6 min read

How to manage JavaScript closures in React

Learn how to manage JavaScript closures in React and explore real-life examples of proper JavaScript closure management.

Andrew Evans
Mar 21, 2025 ⋅ 10 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