[DevTools] Implemented re-render mechanism for React 16.9+

packages/react-devtools-shared/src/backend/agent.js

@@ -125,6 +125,7 @@ export default class Agent extends EventEmitter<{|
     bridge.addListener('getOwnersList', this.getOwnersList);
     bridge.addListener('inspectElement', this.inspectElement);
     bridge.addListener('logElementToConsole', this.logElementToConsole);
+    bridge.addListener('forceRerender', this.forceRerender);
     bridge.addListener('overrideContext', this.overrideContext);
     bridge.addListener('overrideHookState', this.overrideHookState);
     bridge.addListener('overrideProps', this.overrideProps);
@@ -255,6 +256,15 @@ export default class Agent extends EventEmitter<{|
     }
   };
 
+  forceRerender = ({id, rendererID}: ElementAndRendererID) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.forceRerender(id);
+    }
+  };
+
   reloadAndProfile = (recordChangeDescriptions: boolean) => {
     sessionStorageSetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY, 'true');
     sessionStorageSetItem(

packages/react-devtools-shared/src/backend/legacy/renderer.js

@@ -753,6 +753,9 @@ export function attach(
       // Can view component source location.
       canViewSource: type === ElementTypeClass || type === ElementTypeFunction,
 
+      // Can force the component to re-render.
+      canForceRerender: false,
+
       // Only legacy context exists in legacy versions.
       hasLegacyContext: true,
 
@@ -891,6 +894,9 @@ export function attach(
   const setInHook = () => {
     throw new Error('setInHook not supported by this renderer');
   };
+  const forceRerender = () => {
+    throw new Error('forceRerender not supported by this renderer');
+  };
   const startProfiling = () => {
     // Do not throw, since this would break a multi-root scenario where v15 and v16 were both present.
   };
@@ -938,6 +944,7 @@ export function attach(
     handleCommitFiberUnmount,
     inspectElement,
     logElementToConsole,
+    forceRerender,
     overrideSuspense,
     prepareViewElementSource,
     renderer,

packages/react-devtools-shared/src/backend/renderer.js

@@ -2115,6 +2115,7 @@ export function attach(
     const typeSymbol = getTypeSymbol(type);
 
     let canViewSource = false;
+    let canForceRerender = false;
     let context = null;
     if (
       tag === ClassComponent ||
@@ -2126,6 +2127,11 @@ export function attach(
       tag === SimpleMemoComponent
     ) {
       canViewSource = true;
+
+      if (typeof scheduleUpdate === 'function') {
+        canForceRerender = true;
+      }
+
       if (stateNode && stateNode.context != null) {
         // Don't show an empty context object for class components that don't use the context API.
         const shouldHideContext =
@@ -2247,6 +2253,9 @@ export function attach(
       // Can view component source location.
       canViewSource,
 
+      // Can force the component to re-render.
+      canForceRerender,
+
       // Does the component have legacy context attached to it.
       hasLegacyContext,
 
@@ -2517,6 +2526,14 @@ export function attach(
     }
   }
 
+  function forceRerender(id: number) {
+    const fiber = findCurrentFiberUsingSlowPathById(id);
+
+    if (fiber !== null && typeof scheduleUpdate === 'function') {
+      scheduleUpdate(fiber);
+    }
+  }
+
   function setInHook(
     id: number,
     index: number,
@@ -3029,6 +3046,7 @@ export function attach(
     handleCommitFiberUnmount,
     inspectElement,
     logElementToConsole,
+    forceRerender,
     prepareViewElementSource,
     overrideSuspense,
     renderer,

packages/react-devtools-shared/src/backend/types.js

@@ -166,6 +166,9 @@ export type InspectedElement = {|
   // Can view component source location.
   canViewSource: boolean,
 
+  // Can force the component to re-render.
+  canForceRerender: boolean,
+
   // Does the component have legacy context attached to it.
   hasLegacyContext: boolean,
 
@@ -242,6 +245,7 @@ export type RendererInterface = {
   logElementToConsole: (id: number) => void,
   overrideSuspense: (id: number, forceFallback: boolean) => void,
   prepareViewElementSource: (id: number) => void,
+  forceRerender: (id: number) => void,
   renderer: ReactRenderer | null,
   setInContext: (id: number, path: Array<string | number>, value: any) => void,
   setInHook: (

packages/react-devtools-shared/src/bridge.js

@@ -100,6 +100,7 @@ type FrontendEvents = {|
   highlightNativeElement: [HighlightElementInDOM],
   inspectElement: [InspectElementParams],
   logElementToConsole: [ElementAndRendererID],
+  forceRerender: [ElementAndRendererID],
   overrideContext: [OverrideValue],
   overrideHookState: [OverrideHookState],
   overrideProps: [OverrideValue],

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js

@@ -159,6 +159,7 @@ function InspectedElementContextController({children}: Props) {
               canEditHooks,
               canToggleSuspense,
               canViewSource,
+              canForceRerender,
               hasLegacyContext,
               source,
               type,
@@ -174,6 +175,7 @@ function InspectedElementContextController({children}: Props) {
               canEditHooks,
               canToggleSuspense,
               canViewSource,
+              canForceRerender,
               hasLegacyContext,
               id,
               source,

packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js

@@ -93,6 +93,20 @@ export default function SelectedElement(_: Props) {
     },
     [bridge, inspectedElementID, store],
   );
+  const forceRerender = useCallback(
+    () => {
+      if (inspectedElementID !== null) {
+        const rendererID = store.getRendererIDForElement(inspectedElementID);
+        if (rendererID !== null) {
+          bridge.send('forceRerender', {
+            id: inspectedElementID,
+            rendererID,
+          });
+        }
+      }
+    },
+    [bridge, inspectedElementID, store],
+  );
 
   const viewSource = useCallback(
     () => {
@@ -115,6 +129,9 @@ export default function SelectedElement(_: Props) {
     (canViewElementSourceFunction === null ||
       canViewElementSourceFunction(inspectedElement));
 
+  const canForceRerender =
+    inspectedElement !== null && inspectedElement.canForceRerender;
+
   const isSuspended =
     element !== null &&
     element.type === ElementTypeSuspense &&
@@ -227,6 +244,14 @@ export default function SelectedElement(_: Props) {
           title="View source for this element">
           <ButtonIcon type="view-source" />
         </Button>
+        {canForceRerender && (
+          <Button
+            className={styles.IconButton}
+            onClick={forceRerender}
+            title="Re-render component">
+            <ButtonIcon type="reload" />
+          </Button>
+        )}
       </div>
 
       {inspectedElement === null && (

packages/react-devtools-shared/src/devtools/views/Components/types.js

@@ -71,6 +71,9 @@ export type InspectedElement = {|
   // Can view component source location.
   canViewSource: boolean,
 
+  // Can force the component to re-render.
+  canForceRerender: boolean,
+
   // Does the component have legacy context attached to it.
   hasLegacyContext: boolean,