2023-02-20
5112
#react
Ohans Emmanuel
295
Feb 20, 2023 ⋅ 18 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:

Nx Adoption Guide: Overview, Examples, And Alternatives

Nx adoption guide: Overview, examples, and alternatives

Let’s explore Nx features, use cases, alternatives, and more to help you assess whether it’s the right tool for your needs.

Andrew Evans
Mar 28, 2024 ⋅ 9 min read
Understanding Security In React Native Applications

Understanding security in React Native applications

Explore the various security threats facing React Native mobile applications and how to mitigate them.

Wisdom Ekpotu
Mar 27, 2024 ⋅ 10 min read
Warp Adoption Guide: Overview, Examples, And Alternatives

warp adoption guide: Overview, examples, and alternatives

The warp web framework for Rust offers many enticing features. Let’s see when and why you should consider using warp in your projects.

Ukeje Goodness
Mar 26, 2024 ⋅ 8 min read
Integrating Next Js And Signalr For Enhanced Real Time Web App Capabilities

Integrating Next.js and SignalR to build real-time web apps

In this tutorial, you’ll learn how to integrate Next.js and SignalR to build an enhanced real-time web application.

Clara Ekekenta
Mar 25, 2024 ⋅ 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