Bug: useReducer and same state in React 18

[dkmqflx]

import React, { useReducer } from 'react';

const initialState = 0;
const reducer = (state, action) => {
  switch (action) {
    case 'increment':
      return state;
    case 'decrement':
      return state;
    case 'reset':
      return initialState;
    default:
      return state;
  }
};

export const UseReducer = () => {
  const [count, dispatch] = useReducer(reducer, initialState);

  console.log('UseReducer Render');
  return (
    <div>
      <div>Count = {count}</div>
      <button onClick={() => dispatch('increment')}>Increment</button>
      <button onClick={() => dispatch('decrement')}>Decrement</button>
      <button onClick={() => dispatch('reset')}>Reset</button>
    </div>
  );
};

• In react 17, after the component has finished its initial render, the state value is zero, and then when i now click on the reset button which again sets the state value to zero react will not re-render the component
• Thus, console.log('UseReducer Render'); is printed only once.
• But after updating version to 18, whenever i click reset button, console.log('UseReducer Render'); is printed
• I used same code but, result is different
• So i want to know why component is rendered when same state is passed to useReducer in React 18.
• Comparing useState, using useState hook, when same state is passed, component is not re-renderd in react 17 and react 18.

[iamyoki]

I support this issue and confirmed with this example: https://codesandbox.io/s/react18-usereducer-rerender-issue-hw97bp

Another issue I noticed:
The renderCount ref should be add twice at first mount, but it only add once however log twice, which is pretty weird to me.

[Leoff00]

I think this issue is already be treated by the react team i had the same bug, but realized that had open issues reported the same bug. I'm downgraded to the v.17 and work implement a work-around.

[markerikson]

I'm pretty sure this is specifically due to the removal of the useReducer "eager bailout" behavior, which was done to fix some additional edge cases:

#22445

[gaearon]

The early bailout was removed to fix other bugs. However React would still ignore the result of that render if the new final state is referentially equal. So it wouldn’t go into child components or diff the DOM. So this should usually not even be a perf regression.

[gaearon]

Another issue I noticed:
The renderCount ref should be add twice at first mount, but it only add once however log twice, which is pretty weird to me.

There is no bug here either. Rendering runs twice to find common mistakes. But the result of the first render is 100% discarded. So you get a fresh ref the second time.