I need to update a useCallback hook on a certain event that is emitted by eventEmitter3. Right now I update a local state with the current time to trigger the useCallback. That works but looks crazy complicated. Is there a better solution?
const [referencesDidChange, setReferencesDidChange] = useState(0);
useEffect(() => {
const referencesChange = () => {
setReferencesDidChange(new Date().getTime());
};
eventEmitter.on(Events.ReferencesChange, referencesChange);
return () => {
eventEmitter.removeListener(Events.ReferencesChange, referencesChange);
};
}, []);
const renderLeaf = useCallback(props => <Leaf {...props} />, [referencesDidChange]);
As Rico Kahler pointet out in the comments in his answer, there is a react docs example on this, which results in the much clearer:
const [referencesDidChange, setReferencesDidChange] = useReducer(x => x + 1, 0);
useEffect(() => {
eventEmitter.on(Events.ReferencesChange, setReferencesDidChange);
return () => {
eventEmitter.removeListener(Events.ReferencesChange, setReferencesDidChange);
};
}, []);
const renderLeaf = useCallback(props => <Leaf {...props} />, [referencesDidChange]);