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.

Warn when calling dispatch() from useEffect() cleanup function on unmounting

See original GitHub issue

Issue Description

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


What is the current behavior?

action dispatched in return callback of useEffect seem to not work

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 ( or CodeSandbox ( example below:

only foo -> baz is logged

import React, { useState, useEffect, useReducer } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function reducer(state, action) {
  console.log("bar", action); // not logged
  // debugger
  return state;

function Foo({ value }) {
  const [state, dispatch] = useReducer(reducer, {});

    () => {
      return () => {
        // debugger
        dispatch({ type: "foo" });
        // debugger
    [state, value]

  return <p>{value}</p>;

function App() {
  const [value, set] = useState(0);

  return (
    <div className="App">
      <button onClick={() => set(value + 1)}>INC</button>
      {value % 2 ? <Foo value={value} /> : null}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

What is the expected behavior? bar is logged in console (foo -> baz -> baraction)

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

react: “16.7.0-alpha.2”, react-dom: “16.7.0-alpha.2”

Issue Analytics

  • State:open
  • Created 4 years ago
  • Comments:16 (5 by maintainers)

github_iconTop GitHub Comments

gaearoncommented, Nov 20, 2018

Reducers should be pure — so you shouldn’t perform side effects like revokeObjectURL there.

dispatch doesn’t do anything when unmounting, just like setState doesn’t do anything. Their only purpose is to re-render, but when unmounting it’s too late for rendering.

It is strange that dispach(action) is called but nothing is happened

We should probably add a warning. I’ll rename this issue to track that.

ThierryColscommented, Nov 23, 2018

Hi @gaearon,

Looks doable, can I try this one?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Understanding React's useEffect cleanup function
React's useEffect cleanup function saves applications from unwanted behaviors like memory leaks by cleaning up effects.
Read more >
React useEffect cleanup function unexpectedly called
The cleanup function returned from an effect is only ever explicitly called on unmount if you pass an empty array as the second...
Read more >
Cleaning up Async Functions in React's useEffect Hook ...
The useEffect hook allows you to perform actions when components mount and unmount. useEffect(() => { // actions performed when component mounts ...
Read more >
How to Cleanup Async Effects in React - Dmitri Pavlutin
1. State update after unmounting ; import { useState, useEffect } from 'react'; ; function Employees() { ; const [list, setList] = useState(null);....
Read more >
Demystifying useEffect's clean-up function - Max Rozen
So when does clean-up run? · id starts as 1 . · Component renders, displaying id as 1 in the UI · useEffect...
Read more >

github_iconTop Related Medium Post

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 Post

No results found

github_iconTop Related Hashnode Post

No results found