Top tips and tricks I learned from EpicReact complied in the thread below https://abs.twimg.com/emoji/v2/... draggable="false" alt="🎩" title="Zylinder" aria-label="Emoji: Zylinder"> https://abs.twimg.com/emoji/v2/... draggable="false" alt="🪄" title="Magic wand" aria-label="Emoji: Magic wand">

Thanks @kentcdodds https://abs.twimg.com/emoji/v2/... draggable="false" alt="🙌🏻" title="Erhobene Hände (heller Hautton)" aria-label="Emoji: Erhobene Hände (heller Hautton)">

Everyone working with React must check this out https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread">https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇🏻" title="Rückhand Zeigefinger nach unten (heller Hautton)" aria-label="Emoji: Rückhand Zeigefinger nach unten (heller Hautton)">
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✨" title="Funken" aria-label="Emoji: Funken"> React Fundamentals https://abs.twimg.com/emoji/v2/... draggable="false" alt="⚡️" title="Hochspannungszeichen" aria-label="Emoji: Hochspannungszeichen"> https://abs.twimg.com/emoji/v2/... draggable="false" alt="🛰" title="Satellit" aria-label="Emoji: Satellit">

If you are using the key as an index in React you should consider checking this example on how it affects the rendering.

Link to demo - https://react-fundamentals.netlify.app/isolated/final/07.extra-1.js">https://react-fundamentals.netlify.app/isolated/...
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✨" title="Funken" aria-label="Emoji: Funken"> React Hooks

To master React hooks you need to understand the following concept https://abs.twimg.com/emoji/v2/... draggable="false" alt="🎯" title="Volltreffer" aria-label="Emoji: Volltreffer">

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> useState
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> useEffect
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> useRef
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> useReducer
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> useCallback
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> useContext
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> useLayoutEffect
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> useImperativeHandle
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> useDebugValue

@kentcdodds has nicely explained them
Output https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔥" title="Feuer" aria-label="Emoji: Feuer">
Output https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔥" title="Feuer" aria-label="Emoji: Feuer">
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✨" title="Funken" aria-label="Emoji: Funken"> Perf death by a thousand cuts https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔪" title="Küchenmesser" aria-label="Emoji: Küchenmesser"> https://abs.twimg.com/emoji/v2/... draggable="false" alt="🍎" title="Roter Apfel" aria-label="Emoji: Roter Apfel">

This HOC component is all you need to memorize a specific slice of the state https://abs.twimg.com/emoji/v2/... draggable="false" alt="🍕" title="Pizzastück" aria-label="Emoji: Pizzastück"> so that it re-renders only when the slice of the state it cares about is changed.
https://abs.twimg.com/emoji/v2/... draggable= Perf death by a thousand cuts https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔪" title="Küchenmesser" aria-label="Emoji: Küchenmesser"> https://abs.twimg.com/emoji/v2/... draggable="false" alt="🍎" title="Roter Apfel" aria-label="Emoji: Roter Apfel">This HOC component is all you need to memorize a specific slice of the state https://abs.twimg.com/emoji/v2/... draggable="false" alt="🍕" title="Pizzastück" aria-label="Emoji: Pizzastück"> so that it re-renders only when the slice of the state it cares about is changed." title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="✨" title="Funken" aria-label="Emoji: Funken"> Perf death by a thousand cuts https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔪" title="Küchenmesser" aria-label="Emoji: Küchenmesser"> https://abs.twimg.com/emoji/v2/... draggable="false" alt="🍎" title="Roter Apfel" aria-label="Emoji: Roter Apfel">This HOC component is all you need to memorize a specific slice of the state https://abs.twimg.com/emoji/v2/... draggable="false" alt="🍕" title="Pizzastück" aria-label="Emoji: Pizzastück"> so that it re-renders only when the slice of the state it cares about is changed." class="img-responsive" style="max-width:100%;"/>
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✨" title="Funken" aria-label="Emoji: Funken"> React Suspense

Got to learn few things which I never knew
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Concurrent Mode
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Data-Fetching
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Render as You Fetch
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> useTransition
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Cache Resources
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Suspense Image
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Custom Hooks
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> SuspenseList
Thanks for your time!

PS: There are many more tips and tricks in https://epicreact.dev/ ">https://epicreact.dev/">...

Like/RT to share knowledge https://abs.twimg.com/emoji/v2/... draggable="false" alt="🙂" title="Leicht lächelndes Gesicht" aria-label="Emoji: Leicht lächelndes Gesicht">
Back to top! https://twitter.com/makadiaharsh/status/1386704779477360641">https://twitter.com/makadiaha...
You can follow @MakadiaHarsh.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled: