React allows accessing the latest props and states in useEffect/useLayoutEffect without causing re-renders. The useEffectEvent hook will help achieve this. The hook helps extract non-reactive logic from useEffect webhooks. Non-reactive logic refers to when we don't want to perform any action. The useEffectEvent hook wraps a callback function and returns an Effect Event function, and whenever it gets called, the function has access to the latest props and state. So, it won't trigger a re-render, unlike in the case of dependency arrays. But it's not the replacement of the dependency array, as that is usually required to trigger effects. You should try it in your workflow as per the use cases. #react #javascript #frontend #hooks
It helps solve specific problem in react "Dependancy Array Variables". if we use any state or prop inside an effect , we must need to include in dependancy array. if we include -> effect re run on change if we do not include -> it creates Stake closure Old way was useRef , now its "useEffectEvent" It separates Reactive (triger a re render) VS non-Reactive (logic used during sync) changes. Add only those those things in dependancy array that should actually re triger effect. some React constraints 1- only call inside useEffect 2- never pass it to children , could lead to unpredictable behaviours 3- do not use for UI events courtesy : LLM
before react 19, we were using useRef , in react 19 they introduced this hook
Finally, a way to stop fighting stale closures without over-engineering dependency arrays.
Thank you for reminding about this hook. Great for applications involving sockets.
Just put a end condition
Something new i learned today. Can you write a more details post about it will help to understand in more depth. Thanks Ali Raza
would you plz elaborate a more!! btw insightful post