David Khourshid @ ReactNext 22 - Goodbye, useEffect

ReactNext 2022
Israel's Annual React & React-Native conference

Powered by EventHandler
-----------------------------------------
Goodbye, useEffect:
From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. Thankfully, there is a science (well, math) to side effects, formalized in state machines and statecharts, that can help us visually model and understand how to declaratively orchestrate effects, no matter how complex they get. In this talk, we’ll ditch the useEffect hook and discover how these computer science principles can be used to simplify effects in our React apps.

-----------------------------------------
David Khourshid:
David is a software engineer who loves playing piano and is passionate about animations, state machines, cutting-edge user interfaces, and open-source. Previously at Microsoft, he is now the founder of Stately, a startup focused on making even the most complex application logic visual and accessible to developers and non-developers alike.

-----------------------------------------
#javascript #reactjs #programming #software #development #softwaredevelopment

[EscherSketcher]

9:14 Just to clarify, the double useEffect only happens during development and Strict mode.

So not an issue in production, but still something to consider.

[vidbina]

Celsius still had money at this point in time.

[hello]

Thank you so much for this talk. This is mind-blowing!

[chairlovawitabat]

Thank you for this talk! Very interesting. I am guilty of some of the patterns here.

So in the case where we don’t have frameworks to rely on, it is strongly recommended to import a library like react-query to fetch data ? There is no pattern native in react that would be good/recommended practice to fetch data?

[sIvEeodCSIFIjGz]

ok but I cannot put remix or nextjs in just to avoid using an effect. that part is not really useful

[yairvsync]

The example for your "refactor" at 23:00 is an anti-pattern. You should use `useEffect` and de-couple the logic.

The `toggleView` function is only a callback for a physical DOM button, and that function's logic should be limited
to do a single-job, which is to update internal state for `isOpen`, without any assumptions for parent callbacks (the props).

This is exactly why `useEffect` is so beautiful, as it runs a side-effect, which is unrelated to the current component at this demo)
and this creates a beautiful code where the internal state can be changed by any manner and the parent will know,
REGARDLESS to the button being clicked or not. Always decouple state side-effects from DOM events callbacks.

This I say as a programmer for almost 30 years and client-side dev for almost 20 (And a React expert)

[yairvsync]

Senior React devs don't struggle with it.
Only unqualified devs which were erroneously promoted to "senior" status.

Out of the senior devs our there, only ~5% are real seniors. The others are just average devs that have been doing average work for years
and cannot remain in `junior` status as their ego will be shattered.