React: How To Stop Re-renders

How can you stop React from re-rendering your components so much, or should you even try?

#shorts

[hoads]

I think this is misleading, because there are often times when react is re-rendering because of a bug and so this video is confusing for beginners. There are plenty of fixes to prevent re- rendering. A few that come to mind include, having a context value which handles different unrelated state which could be solved by splitting it into multiple contexts. Or maybe beginners simply don't understand referential equality, and by using useCallback they can memoize dependencies.There are plenty of other reasons so it would be great to get a video on these more subtle fixes.

[UMBERELLA_ACADEMY]

Interviewer will go crazy If I tell him This is what react does why do you want me to stop re-rendring😂

[PhilipAlexanderHassialis]

"How to stop React components from re-rendering?"
"Use Solid"

[tejasjani]

ReactJS is good for GPU, not for CPU and RAM.

[vivekkumar-pcxy]

sir, you are genius in react js. i want to know your journey and learn from your journey.please make video on it

[CodeWithKuyaJoe]

Its not a bug?! Haha. Theres solidjs though which is basically similar React but with fine-grained reactivity :) however it doesnt use virtual DOM 😊

[DanielNistrean]

The problem with rerenders is that all the constants and functions are redeclared and rerun. Which can became a performance issue. I don't understand how Solid have better performance than React without using virtual Dom and rerendering.

[rumble]

It's a huge pain when you actually do need to do it though

[kareemlateefyomi]

I’m experiencing a bug where a useEffect is being called repeatedly, I need a way to stop this rerender

[vuongqtvn]

vscode theme is so beautiful, can you make a video tutorial?

[cas]

Not sure if I am a fan of this statement. I think there is a lot of grey area here. If people tend to not worry or think about rerenders, spending on how your components or pages are designed you may also introduce a ton of additional fetch request as a side effect of those rerenders you chose not to care about.

[mikeshreek]

Great video! Thanks for explaining it! I hope that others can learn from this.

One thing I might add why React designed it this way is because re-rendering DOM is the commonly most expensive process in Frontend development. All the computations that the browser does just to make sure that every element is properly aligned and building the UI is just way too much. Not to mention that Javascript only runs on a single thread.

This concept is based on the Browser Rendering Pipeline and each steps and processes that the browser do to convert your code to UI, and how every javascript UI framework/library tries to prevent or reduce the pipeline needed to redraw the UI from your code executions.

[Grimz]

Interesting so if you store a high level state of a json configuration describing a page you're not worried about every child component rerendering whenever you make a change? I've memoized each component but a child will always rerender its direct parent elements... because they're children.

[luigif]

Junior dev: my component keeps flickering
You: yeah, it's supposed to do that

[bryanltobing]

Then. is it not that necessary to have a component wrapped with `React.memo` if the component is a pure component that doesn't have a state or effect on it?

[shirakuyanai]

If I fetch data from API and it's constantly re rendering, my pc's gonna crash.

[yami_]

I had a problem where i had multiple canvas and i had to change their parent based on some state.
And state change obviously caused canvas to rerender(theywere about 1200x1000) so it rally caused lag even though i was using usememo.

At the end i ended up using canvas as htmlelement instead of jsx and storing them and appending to dom manually

[muhammedibrahem]

A question sir, if for example i have a component that i use to print it multiple times and I change their values via a global state and i pass the state to these elms via props when i do any minor changes to one of these components separately, like manipulating state then it will re-render and all the elements that share that state will also re-render even if I do manipulate only one of them

In this case do i need to make a state checker or use a memo to prevent the rest of the siblings from re-rendering or is this OK? Cuz I watched a tutorial saying optimize react re-renders and he was preventing the components that don't get changes from re-rendering
The style he used in the state was something that looks like redux style but handmade ( not a 3rd party library )

[Jrrs]

Not really clear advice, render are dude to state or parent changes unless you have optimised with pure class function / usememo / usecallback. So nothing may change for a child component but if parent rerenders the child will rerender.

[ilkou]

But I think that avoiding re-renders and placing states properly across the app and only render when necessary, would remove the overhead of comparing the virtual dom with the real dom and therefore a better performance, I think.. otherwise libraries such as react-hook-form wouldn't exist?