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

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

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 (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

https://codesandbox.io/s/5yqmo128v4

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, {});

  useEffect(
    () => {
      return () => {
        console.log("foo");
        // debugger
        dispatch({ type: "foo" });
        // debugger
        console.log("baz");
      };
    },
    [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}
    </div>
  );
}

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”

[gaearon]

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.

[ThierryCols]

Hi @gaearon,

Looks doable, can I try this one?