React Hooks useState+useEffect+event gives stale state
value
is stale in the event handler because it gets its value from the closure where it was defined. Unless we re-subscribe a new event handler every time value
changes, it will not get the new value.
Solution 1: Make the second argument to the publish effect [value]
. This makes the event handler get the correct value, but also causes the effect to run again on every keystroke.
Solution 2: Use a ref
to store the latest value
in a component instance variable. Then, make an effect which does nothing but update this variable every time value
state changes. In the event handler, use the ref
, not value
.
const [value, setValue] = useState(initialValue);
const refValue = useRef(value);
useEffect(() => {
refValue.current = value;
});
const handleEvent = (msg, data) => {
console.info("Value in event handler: ", refValue.current);
};
https://reactjs.org/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often
Looks like there are some other solutions on that page which might work too. Much thanks to @Dinesh for the assistance.
Updated Answer.
The issue is not with hooks. Initial state value was closed and passed to EventEmitter and was used again and again.
It's not a good idea to use state values directly in handleEvent
. Instead we need to pass them as parameters while emitting the event.
import React, { useState, useEffect } from "react";
import { Controlled as CodeMirror } from "react-codemirror2";
import "codemirror/lib/codemirror.css";
import EventEmitter from "events";
let ee = new EventEmitter();
const initialValue = "initial value";
function App(props) {
const [value, setValue] = useState(initialValue);
const [isReady, setReady] = useState(false);
// Should get the latest value
function handleEvent(value, msg, data) {
// Do not use state values in this handler
// the params are closed and are executed in the context of EventEmitter
// pass values as parameters instead
console.info("Value in event handler: ", value);
document.getElementById("result").innerHTML = value;
}
// Get value from server on component creation (mocked)
useEffect(() => {
setTimeout(() => {
setValue("value from server");
setReady(true);
}, 1000);
}, []);
// Subscribe to events on component creation
useEffect(
() => {
if (isReady) {
ee.on("some_event", handleEvent);
}
return () => {
if (!ee.off) return;
ee.off(handleEvent);
};
},
[isReady]
);
function handleClick(e) {
ee.emit("some_event", value);
}
return (
<React.Fragment>
<CodeMirror
value={value}
options={{ lineNumbers: true }}
onBeforeChange={(editor, data, newValue) => {
setValue(newValue);
}}
/>
<button onClick={handleClick}>EventEmitter (works now)</button>
<div id="result" />
</React.Fragment>
);
}
export default App;
Here is a working codesandbox