Search code examples
reactjsreact-hooksusecallback

How to update a useCallback hook on a event


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]);

Solution

  • 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]);