React: React DevTools force re-render button

[kentcdodds]

I'd like to have a button that forces a re-render of the selected component when clicked. For example, adding a button like this on the right of the component controls:

This can be accomplished today by adding a new prop and changing the prop, but it's more work than I want to do.

This would be useful for use while profiling how a component performs with unnecessary re-renders. Right now I just have a button that's tied to a "forceRender" function:

function useForceRerender() {
  const [, set] = React.useState()
  return React.useCallback(() => set({}), [])
}

function FilterComponent() {
  const forceRerender = useForceRerender()

  return (
    <>
      <button onClick={forceRerender}>force rerender</button>
      {/* more JSX */}
    </>
  )
}

Would be cool to have this built-in :)

[hristo-kanchev]

Something like this maybe?

Do you think the UI is getting cluttered over there, @bvaughn ?

If you are cool with this I can submit the PR.

[kentcdodds]

That would be perfect for me 👍

[bvaughn]

Do you think the UI is getting cluttered over there, @bvaughn ?

Yup, that was my first thought when I saw the buttons take up slightly more space than the component name in your screenshot. Not sure what can be done about it that wouldn't add more clicks though (or make the hit area too small to be user friendly).

Let's not worry about the button space for now. I can revisit that UI.

If you are cool with this I can submit the PR.

Sure, let's see a PR.

I wonder if "_Re-render component_" might be more intuitive to new users than "_Force update_"?

[hristo-kanchev]

Yeah, "Re-render component" is better. I'll change the tooltip text 👍

[hristo-kanchev]

Hey @bvaughn! Hope you are doing well.

I'm struggling to find a good way to re-render the component that will capture all use cases.

I used instance.forceUpdate but this doesn't capture all use cases - for example functional components.

I can push my code if you want to check it out and advise if possible?

[bvaughn]

You should push it if you'd like someone to look it over. I don't know if I'll have any time in the near future though. Going to be pretty busy preparing for React conf.

[bvaughn]

I will say that I don't think instance.forceUpdate is the right way to go though.

You might try using the scheduleUpdate function injected into the renderer, although this would only work for v16.9+ (but I think that's okay).

[bvaughn]

Looked at @hristo-kanchev's PR this morning and the code looks good, but I realized something was bugging me about the feature request. I don't understand the use case here.

If your component is pure, forcing a re-render should be a no-op. (The output should be the same since the inputs didn't change.) So what is the purpose of doing this? Could you walk me through what you're trying to do/test/measure, @kentcdodds?

[kentcdodds]

The situation is mostly to determine whether opting out of re-renders would be beneficial. In my specific case, I'm contriving examples to demonstrate the benefits of React.memo, but in more real-world scenarios it could be used anywhere that people think there may be a benefit to opting a tree out of unnecessary updates. It's basically a way to help them measure.

I suppose it could be argued that it'd be better for people to profile actual interactions instead though. This feature may just increase people's general unfounded fear of re-renders.

[nik72619c]

Shal I give it a try .. I'd love to make my first PR :)

[hristo-kanchev]

Hey @nik72619c there is already a PR open for this.

We are currently in a discussion if we actually need this feature.

I agree with @kentcdodds that it might "increase people's general unfounded fear of re-renders".

We are also adding an additional button, and the UI is looking cluttered (especially if you have a long component name).

Should we close this issue/PR for now, @bvaughn ?
I'm not sure what should we do 🤷‍♂

[kentcdodds]

I suggest we close it.

[bvaughn]

Sorry for taking a while to circle back to this. I was distracted by the conference.

The explained reasons for this feature make sense, (thanks for adding the motivation) but I'm not sure the benefits outweigh the potential costs in this case, so I agree with the outcome of just closing it for now. We can always reopen!

Thanks for the discussion and the PR contribution!

[slikts]

An another use case for a feature like this is checking if effects are correctly memoized and cleaned up, so it's not just about rerenders.

[dchebakov]

It would be nice to have this button. In my case I need force rerender button to reset state to initial values.

[giotiskl]

shame this was closed, can be a useful feature