How To Clean Up Subscriptions In React Components Try Catch

Stop light. — Photo by Erwan Hesry on Unsplash.

When developing in React, yous will likely see scenarios where components are rerendering more than you lot would expect; which can have a directly impact on an application'due south perceived operation.

And with the introduction of React Hooks, developers now accept even more than ways to inadvertently trigger rerenders (looking at you useEffect!).

Thankfully React gives developers several tools to assist them find the source of unnecessary rerenders. In this post I'll discuss iii of them: DevTools Profiler, React.memo, and React.Profiler.

DevTools Profiler

DevTools Profiler is a fantastic browser plugin that is currently bachelor in Chrome & Firefox (there is also a Node version). Bank check out the docs to larn more most specific features.

Version four of React DevTools — released August 15, 2022 — came with a great new feature chosen "Why did this render?".

Animated gif of the Why did this rerender tool

To use this tool, simply install Profiler and turn on the "Tape why each component rendered while profiling." option. You can and so run Profiler while interacting with your app, focusing on whichever components may be rendering unnecessarily.

Afterward y'all end the Profiler session, you lot'll be able to drill down into individual components to see their render metrics. Under the "Why did this render?" heading you'll run across a listing of reasons the component rendered/rerendered.

Common reasons for rerendering:

Hooks changing (ie useState's setState methode being chosen)
props changing (it volition list the exact props!)
a component's parent rerendering

Of all the debugging tools, I'd say this is the easiest and fastest to set up and use. But there is one shortcoming: at that place is no way to inspect the value of the props that changed; and information technology'southward often helpful to exist able to audit prop values to get a better understanding of what is changing, and why.

To get this information you can use some other tool: React.memo.

React.memo

React v16.half-dozen.0 gave u.s. a new React.memo method that tin can be used with both functional and class-based components to give usa more control over rerenders, similar to the shouldComponentUpdate class component method. Not just is it a good tool for controlling rerenders, it can besides be a helpful tool when trying to find the crusade of rerenders.

The primal to debugging rerenders is to use the 2d optional statement of React.memo which is an "isEqual" office that takes ii arguments, prevProps and nextProps, and gives you command over whether a component should change. Encounter the React docs for memo for more details.

At present with access to prevProps and nextProps, you tin can easily view what is changing and determine the root crusade of rerenders:

                          const              memoizedComponent              =              React.              memo              (MyComponent,              (prevProps,              nextProps)              =>              {              console.              log              (prevProps.thing              ===              nextProps.thing)              ;              /*       When using this function you always demand to render       a Boolean. For now we'll say the props are Non equal        which ways the component should rerender.     */              return              false              ;              }              )

Side note: while you can use React.memo to manually prevent rerenders once you lot observe the result, I highly recommend dealing with the root crusade — which is more often than not a prop that is beingness unnecessarily recreated on every render. Otherwise you'll cease upward ring-aiding every component with React.memo which will result in lots equality checks, plus data being stored in memory.

React.Profiler

Finally, let's take a look at the React.Profiler API, which gives developers additional information points that can be used to debug performance issues.

With React.Profiler, developers can wrap their JSX elements with a <Profiler> component, which takes two props:

id - a unique identifies for the section being profiled.
onRender - a callback function to be chosen on every render. Check out the docs for a full list of the callback parameters.

                          render              (              <Profiler      id=              "test1"              onRender=              {              (              ...args)              =>              {              {              [              1              ]              :              stage,              [              ii              ]              :              actualDuraction              }              =              args;              console.              log              (              {              stage,              actualDuration              }              )              }              }              >              <App              /              >              <              /Profiler>              )              ;

Here a few things you can bank check when debugging rerenders using React.Profiler:

Ensure a component never reverts to the mountain phase afterwards the initial return; information technology should ever be updated.
The actualDuraction should go down later on the initial render. If it stays the same or goes upwards, you lot are likely non rendering children efficiently.
To meliorate understand which user action is triggering a rerender, yous can rails timestamps of multiple actions and see which correlate with the startTime.
baseDuration will tell you the worst instance scenario when a component rerenders. Components with the highest baseDuration are the ones you want to pay actress attention to when optimizing rerenders.

That's information technology! Happy debugging!