2024-10-10
3896
#react
Ejiro Asiuwhu
35635
Oct 10, 2024 ⋅ 13 min read

A guide to the React useReducer Hook

Ejiro Asiuwhu Software engineer with a drive for building highly scalable and performant web applications. Heavily interested in module federation, micro frontends, state machines, TDD, and system designs. Big on web performance and optimization, advanced component design patterns, a11y, SSR, SSG, ISR, and state management. Expert at crafting highly reusable TypeScript-heavy component libraries.

Recent posts:

how to add custom fonts in React Native

How to add custom fonts in React Native

Custom fonts provide your apps with a unique identity. Explore modern ways to add custom fonts in a React Native app, including Google Fonts.

Nitish Sharma
Apr 7, 2025 ⋅ 10 min read
React Useref Hooks

How to use the React useRef Hook effectively

Learn how to use React useRef for managing references, avoiding re-renders, and applying best practices in functional components.

Rahul Chhodde
Apr 7, 2025 ⋅ 11 min read
How to eliminate render-blocking resources — CSS and JavaScript

How to eliminate render-blocking resources — CSS and JavaScript

Use Lighthouse to eliminate render-blocking resources, which block the first paint of your page, in both CSS and JavaScript.

Anna Monus
Apr 4, 2025 ⋅ 8 min read
Mocking Complex APIs With Mirage JS

Mocking complex APIs with Mirage JS

Mock complex APIs with JavaScript’s Mirage JS library including JWT authentication, relational data, role-based access control, and more.

Emmanuel John
Apr 4, 2025 ⋅ 10 min read
View all posts

9 Replies to "A guide to the React useReducer Hook"

  1. Really good explanation, thanks! Just starting to learn react and on top of a lot of new stuff to learn there is more new stuff to learn with the introduction to the Hooks.

    I am currently stuck. I am using useReducer because I have form with multiple inputs. I capture the inputs and call an API. I am getting the results back.

    The part I am stuck on is how to get that data into a table of sorts. But before I can do that I need to update the state with the data I get back (I think). I am having a hard time finding how to do that. Most examples just have everything on one page: the reducer, the axios call, the update to one field because they are using useState, and just display the results in a console log. That’s great but who does that? #1) Just call a get API on page load and #2) Just plop the data into the console log. While informative and helps with some understanding, it is this last piece of the puzzle that I am stuck on. I am a little frustrated at the moment. If you know of a site that shows this last piece of the puzzle of if you have an example somewhere please let me know. Thanks for your time and sharing this info for newbs!

  2. I had to alter the code for the code to work: while the await login function is declared, it is not called as a method. So refactoring to extract the | function login… | (which now you can make available to both the state and reducer examples):

    const handleOnSubmit = async (e) => {
    e.preventDefault();
    setError(”);
    showLoader(true);

    function login(u, p) {
    return new Promise((resolve, reject) => {
    console.log(‘fuc’);
    setTimeout(() => {
    if (u === ‘username’ && p === ‘password’) {
    resolve();
    } else {
    reject();
    }
    }, 1000);
    });
    }

    try {
    await login(username, password)
    setIsLoggedIn(true);
    } catch (error) {
    setError(‘Incorrect username or password!’);
    showLoader(false);
    setUsername(”);
    setPassword(”);
    }
    }

  3. I’ve got a useReducer that receives a payload, calls a function that returns the actual “payload” that updates teh context. Should those functions be part of the reducer itself, or global? wrapped in useCallback?

Leave a Reply