React useReducer Hook fires twice / how to pass props to reducer?

redux reducer called multiple times
react usereducer selector
react usereducer dispatch callback
usereducer dispatch multiple actions
react hooks uselayouteffect
react usereducer action creators
react functional component rendering twice
redux action dispatch twice

FOREWORD / DESCRIPTION

I am trying to use React's new hooks feature for an e-commerce website that I am building, and have been having an issue working a bug out of my shopping cart component.

I think it is relevant to preface the discussion with the fact that I am trying to keep my global state modular by using multiple Context components. I have a separate context component for the types of items that I offer, and a separate context component for the items in a person's shopping cart.

PROBLEM

The issue I am having is that when I dispatch an action to add a component to my cart, the reducer will run twice as if I had added the item to my cart twice. But only when it is initially rendered, or for weird reasons such as the display is set to hidden and then back to block or for a change in the z-index and potentially other similar changes.

I know this is kind of verbose, but it is rather knit picky issue so I have created two codepens that showcase the issue:

full example

minimum example

You will see that I have included a button to toggle the display of the components. This will help showcase the correlation of the css to the issue.

Finally please monitor the console in the code pens, this will show all button clicks and which part of each reducer has been run. The issues are most evident in the full example, but the console statements display the issue is also present in the minimum example.

PROBLEM AREA

I have pinpointed the problem to be related to the fact that I am using the state of a useContext hook to get the items list. A function is called to generate the reducer for my useReducer hook, but only arises when a different hook is used AKA I could use a function that wouldn't be subject to re-eval like hook is and not have the issue, but I also need the info from my previous Context so that workaround doesn't really fix my issue.

Relevant Links

I have determined the issue is NOT an HTML issue so I will not include the links to the HTML fixes I have tried. The issue, while triggered by css, is not rooted in css so I will not include css links either.

useReducer Action dispatched twice

useReducer Action dispatched twice, reducer has dependencies (e.g. on props or other state) that require it to be defined within another function: React useReducer Hook fires twice / how to pass � The useReducer Hook. The useReducer is a powerful alternative to the useState hook which allows us to initialize state, as well as, encode all the possible actions that can be performed on the state centrally. The useReducer hook becomes the predictable state container for a component locally.

Seperate the Reducer from the functional component that helped me solve mine

useReducer Action dispatched twice : reactjs, A function is called to generate the reducer for my useReducer hook, but only arises when a different hook is used AKA I could use a function that wouldn't be� useReducer is one of a handful of React hooks that shipped in React 16.7.0. It accepts a reducer function with the application initial state, returns the current application state, then dispatches a function.

An example based on Ryans excellent answer.

  const memoizedReducer = React.useCallback((state, action) => {
    switch (action.type) {
      case "addRow":
        return [...state, 1];
      case "deleteRow":
        return [];
      default:
        throw new Error();
    }
  }, []) // <--- if you have vars/deps inside the reducer that changes, they need to go here

  const [data, dispatch] = React.useReducer(memoizedReducer, _data);

useReducer dispatch calls reduce twice � Issue #16295 � facebook , Scenario I have a custom hook that returns an action. The parent component " Container" utilized the custom hook and pass the action as prop to a … ( instead of always being a new function) whenever useApiCallReducer is called again. React Hooks API is officially released in React 16.8.In this post, we focus especially on useReducer by introducing various use cases. Before continuing reading this tutorial, please read the…

Powerful React Hook, Reducer called twice when using ReludeReact.Reducer. react hooks setState and class setState xiaohesong/react-by-webpack4#7. Open. The need to manage local state with a reducer in a complex component is common enough that we’ve built the useReducer Hook right into React. You’ll find it together with other built-in Hooks in the Hooks API reference.

A Beginner's Guide to React, Part 2: Hooks Edition, The useReducer hook becomes the predictable state container for a component locally. We can pass this dispatch method reference as a prop to the child component in terms of the hook getting called twice unexpectedly. So the method useReducer has two items in its array state and dispatch. Also the useReducer takes in two parameters: one is reducer the other is initial-state. In the useReducer param reducer, I pass in:

How to use useReducer in React Hooks for performance , Hooks are functions that enable us to use state and other React features in of the major Hooks — useState , useEffect , useContext , and useReducer — If that array is empty, useEffect will only be called twice: once when the props value at all , but they have to receive it in order to pass it further down. In addition, it's important to know that React's props are read only. There is no way in React to set props (even though it was possible in the past). After all, props are only used to pass data from one component to another component React, but only from parent to child components down the component tree. React Props vs. State

Comments
  • Wow this answer is golden, much appreciated!