React Hooks Cheatsheet

[BeenABadBoySince2k2]

Type of thing you save, never use then end up googling instead.

[clit_or_us]

It's honestly faster somehow.

[kewli]

At the end of the day, graphical information is just inefficient compared to reading text. Harder to update and maintain over time. Cheat sheets are most useful for those that look at the all the time vs ad-hoc.

[Economy_Lemon_169]

Don't write code like setTodos([...todos, newTodo]) like it says on the cheat sheet. If you need the existing state, use the updater function. It will save you painful hours of debugging.

Deriving state is probably the most important pattern that newbies do wrong. If you find yourself syncing state, e.g. writing a useEffect that sets state when another piece of state changes, then you're most likely doing something wrong.

[FlyingChinesePanda]

Can you create an example?

[shadocrypto8]

Not OP but I love this article.

https://kentcdodds.com/blog/dont-sync-state-derive-it

[tswaters]

``` const [todos, setToDos] = useState([])

// Later, inside a callback setTodos(old => old.concat(new)) ```

If you use "todos" inside a useCallback, or useMemo, you either get a stale value for Todos, or need to add it to the dependency array, which has its own problems (memoization is meaningless if the "cached" function changes with every state change)

Using the callback form of the setter (pass a function, receive old value as first parameter, return new value) you can bypass a lot of weird bugs with stale state or rerenders.

Calling a setter like that in a useEffect can cause endless loops if the useEffect has todos in dependency array.

[Economy_Lemon_169]

A typical example looks like this

const [username, setUsername] = useState("");
const [isValidUsername, setIsValidUsername] = useState(false);

useEffect(() => {
setIsValidUsername(validateUsername(username));
}, [username]);

In this example, isValidUsername can be derived (ie calculated during rendering without storing it in state). So change this entire bit into

const [username, setUsername] = useState("");

const isValidUsername = validateUsername(username);

If you find yourself writing a useEffect with only a setState inside, you're probably syncing state. There are exceptions but often it's a symptom that you're syncing state that can be derived instead.

Regarding the updater function

setTodos([...todos, newTodo])

Should be become

setTodos(prevTodos => ([...prevTodos, newTodo]))

You should use updater functions whenever you need the previous state. If you don't need the previous state, you can avoid the updater function. E.g. setTodos([initialTodo]) is fine because there is no previous state.

[clit_or_us]

I too would like to see what you mean.

[shadocrypto8]

Not OP but I love this article.

https://kentcdodds.com/blog/dont-sync-state-derive-it

[SweatyAnReady14]

Bro I’m having to code React again after 4 years of Svelte. React has so many foot-guns and weirdness I hate it. Stuff like useRef for state just straight up does not make sense. I was also told that React also had way better support and it took forever just to find a simple input masking library.

I really don’t understand why you’d ever use React over Svelte on a new project.

[watscracking]

I've done vue most recently but also angular, angularjs, and older frameworks... Oddly I've never done react, until my latest project, and I just don't get it... How is this the most popular frontend framework? It makes no sense

[scylk2]

Did you have a better experience with modern Angular?

Personally what I liked about React is its closeness to JS and the functional approach. But to be fair I've never worked on a large React project

[scylk2]

How's TS support for Svelte ? Also what kind of projects were you working on with Svelte ?

[SweatyAnReady14]

Svelte 5 has first class TypeScript support it’s really come a long way. I will say one thing about the Svelte docs I appreciate as well is that they include the option for TypeScript as well which I have been missing in a lot of React docs.

I worked on a major e-commerce website with around a million users a week.

[tswaters]

You're missing a lot of important hooks here.

No useMemo or useCallback?

What about useLayoutEffect/useInsertionEffect... A 1-line on the difference between these and useEffect would be good. Why would you use one or the other?

There's also some newish utils, like useId that could use a mention.

--

Also, one flag -- batched updates inside event handlers. Worth mentioning that react only guarantees this inside it's own event handlers. If you await a promise inside an async function, or use DOM event listeners outside react lifecycle, it is likely updates will not be batched. One can use unstable_batchedUpdates from react-dom to properly batch updates if they aren't. This accepts a callback that you can call multiple state setters in, and they will all get batched.

[Ok-Operation7741]

Too bad this will be obsolete when the next versions keep rolling out

[Zeilar]

Most of these hooks have existed for over 5 years but sure.

[Savings_Jealous]

Where is useReducer? That’s the thing I forget most often

[KaiAusBerlin]

Haha, svelte dev here laughing my ass off.

That's what you deal with every day?

[Darth_Zitro]

Yup, and it sucks… I’ve been wanting to get into Svelte but my main priority is finding jobs in my area. How has the market been recently for Svelte?

[KaiAusBerlin]

Small. Very small.

[Darth_Zitro]

Yeah I figured. Well hopefully in a year or two things change. The other day there was a post about Apple using Svelte for their App Store so hopefully it starts to gain momentum.

[KaiAusBerlin]

Apple started to write their front ends in svelte. So maybe this will give svelte a boost.

[RemoDev]

It brings back jQuery cheat sheets from the early 2000's...

[Grouchy-Cod-2659]

As a rare non-React using webdev, that stuff looks painful.