question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Hooks: reducer + useEffect

See original GitHub issue

Using the example at https://reactjs.org/docs/hooks-reference.html#usereducer when I try to add

useEffect( () => {
  console.log('state changed')
}, [state])

And if the code ends up calling action.type to the default-action (which is return the previous state), the above effect is still executed. Is this a desired behavior?

Do you want to request a feature or report a bug? Possibly a bug?

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior? When a reducer retains the previous state and the state is used in useEffect, it should not trigger this as state change.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? 16.7.0-alpha.0

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
bartlangelaancommented, Nov 14, 2018

I couldn’t reproduce this.

Edit facebook/react#14185

When pressing the ‘default’ button, the useEffect never runs. When pressing the ‘reset’ button, the useEffect always runs if that wasn’t the latest button clicked.

This is behaving exactly as intended, I believe.

0reactions
gaearoncommented, Nov 12, 2018

This needs a reproducing example.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Hooks API Reference - React
This page describes the APIs for the built-in Hooks in React. ... If you return the same value from a Reducer Hook as...
Read more >
An Easy Guide to React useReducer() Hook - Dmitri Pavlutin
The reducer is a pure function that accepts 2 parameters: the current state and an action object. Depending on the action object, the...
Read more >
React useReducer Hook ultimate guide - LogRocket Blog
An alternative to the useState Hook, useReducer helps you manage complex state logic in React applications.
Read more >
How to use React useReducer hook like a pro - Devtrium
The React useReducer hook is another way to manage state in components. But do you know when to use it vs useState, and...
Read more >
React Hooks Tutorial: useState, useEffect, useReducer
Akin to useState , useReducer is another hook, convenient for dealing with more complex state changes in React components. useReducer borrows ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found