React DevTools force re-render button

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 😃

[giotiskl]

shame this was closed, can be a useful feature

[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.