Which React Hook Mistakes can cause re-renders, memory leaks and bugs? Must for React beginners

Top 7 mistakes for React Hooks useState, useEffect, useReducer, useCallback, useMemo.
Examples with explanations and live fixes will help in understanding react hooks.
React interview questions might also raise discussions about these mistakes.
So this video will be definitely useful for beginner junior react developers.
More is yet to come - subscribe to watch more!
Timestamps:
00:00 Mistake 1 - useState - nextState based on current state
01:16 Mistake 2 - useState/useReducer - initial state recalculation on re-renders
03:36 Mistake 3 - useEffect - calling fetch/axios directly in React component
06:50 Mistake 4 - useEffect - not removing listeners/timers on unmount
10:00 Mistake 5 - Dependencies array - passing ever-new objects
11:13 Mistake 6 - useCallback - event handlers re-creation on re-renders
12:30 Mistake 7 - useMemo - not memoizing values derived from props
#reactjs #reacthooks #usestate #useeffect #usememo #usereducer #usecallback

[@vladozhekhovskyi6071]

it is very useful. thank you!

[@letok2871]

Super, good job!

[@Mathes881]

Mistake 3 is not a mistake, just using libraries for managing server state is preferable, such as rtk query or react query (tanstack query). Mistake 7 solution is only good when there is a heave computation, we shouldn't wrap everything with useMemo because we are just adding additional memory usage, so that const with computed value is perfectly fine and recommended.

[@frontend_no_limits]

1. Separation of concerns aren’t broken in mistake 3? Do you really think that UI component is responsible for implementation details of dealing with the persistence layer? Libraries are just helpers and implementation details. They shouldn’t dictate (or be a reason) how to separate concerns. 2. Example was definitely simplified, but what is the reason to recompute some complex value when props for it remain the same? And we’re not talking about primitives only, by the way. It might be non-memoized computed object. What then will happen if we pass such no -memoized new object into dependencies array of useEffect for example?

[@huzafaarshad973]

in second mistak waht if the props changes ? does it call the initial function again ?

[@frontend_no_limits]

no, the initializer function won't be called again