Bug: useReducer rendering behaviour in React 18

[sshubham681]

import React, { useReducer } from "react";

const initialState = 0;

const reducer = (state, action) => {
switch (action) {
case "INCREMENT":
return state + 1;
case "DECREMENT":
return state - 1;
case "RESET":
return initialState;
default:
return state;
}
};

const UseReducer = () => {
const [count, dispatch] = useReducer(reducer, initialState);
console.log('UseReducer Render')
return (

{count}

<button onClick={() => dispatch("INCREMENT")}>Increment
<button onClick={() => dispatch("DECREMENT")}>Decrement
<button onClick={() => dispatch("RESET")}>Reset

);
};

export default UseReducer;

In react 17, useReducer re-render was working as same as useState does but now after updating version to 18, whenever i click reset button, console.log('UseReducer Render'); is printed

[hhkk28]

Even with react version 17, the console.log('UseReducer Render') is re-rendered on every state update. Here is the same useReducer behavior in version 17 - Repl-Link and in version 18 Repl-Link I don't think this is a bug.

[mikirejf]

@hhkk28 There's a difference between v17 and v18 for the "reset" button. The v17 version is working as described in the docs (https://reactjs.org/docs/hooks-reference.html#bailing-out-of-a-dispatch):

Bailing out of a dispatch
If you return the same value from a Reducer Hook as the current state, React will bail out without rendering the children or firing effects. (React uses the Object.is comparison algorithm.)

Note that React may still need to render that specific component again before bailing out. That shouldn’t be a concern because React won’t unnecessarily go “deeper” into the tree. If you’re doing expensive calculations while rendering, you can optimize them with useMemo.

Check out the following example: https://codesandbox.io/s/wispy-hooks-0vytuh?file=%2Fsrc%2FApp.js
React should bail out from continuously re-rendering the component (one additional render is expected).

[hhkk28]

I see, now i understand the issue. According to the PR - #22445 I think this bailout behavior is removed for useReducer.

[mikirejf]

@hhkk28 Thanks for pointing out the PR. Much appreciated!

[tomdevisser]

Does that mean this issue can be closed @mikirejf ?

[mikirejf]

@tomdevisser

Can be closed 👍

[tomdevisser]

@sshubham681

@tomdevisser

Can be closed 👍

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!