Necesito actualizar un enlace useCallback en un determinado evento emitido por eventEmitter3. En este momento actualizo un estado local con la hora actual para activar el useCallback. Eso funciona pero parece una locura complicada. ¿Hay una mejor solución?

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]);
0
Obiwahn 17 abr. 2020 a las 17:19

2 respuestas

La mejor respuesta

Como Rico Kahler señala en los comentarios de su respuesta, hay un ejemplo de documentos de reacción sobre esto, que resulta mucho más claro:

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]);
0
obiwahn 21 abr. 2020 a las 08:21

Sugeriría extraer los valores más recientes a través de una referencia en lugar de actualizar la devolución de llamada.

En general, con las devoluciones de llamada, no necesita actualizarlas si extrae valores al momento de ejecutarlos. No estoy sugiriendo que siempre haga esto de manera predeterminada, pero en ciertos casos puede limpiar las cosas si vuelve a diseñar para invocar la invocación si puede.

const someRef = useRef(null);

useEffect(() => {
  someRef.current = someChangingValue;
}, [someChangingValue]);

const renderLeaf = useCallback(() => {
  const latestValues = someRef.current;

  // use latest values…
}, []);
1
Rico Kahler 17 abr. 2020 a las 14:40