Update

Author: gaearon

packages/react-dev-utils/forceUpdateHook.js

@@ -51,50 +51,62 @@ window.__enqueueForceUpdate = function(onSuccess, type) {
     }
   });
 };
+
+function traverseDeep(root, onUpdate) {
+  let node = root;
+  while (true) {
+    node.expirationTime = 1;
+    if (node.alternate) {
+      node.alternate.expirationTime = 1;
+    }
+    if (node.tag === 1) {
+      onUpdate(node);
+    }
+    if (node.child) {
+      node.child.return = node;
+      node = node.child;
+      continue;
+    }
+    if (node === root) {
+      return;
+    }
+    while (!node.sibling) {
+      if (!node.return || node.return === root) {
+        return;
+      }
+      node = node.return;
+    }
+    node.sibling.return = node.return;
+    node = node.sibling;
+  }
+}
+
 function forceUpdateAll(types) {
   const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
   const renderersById = hook._renderers;
   const ids = Object.keys(renderersById);
-  const renderers = ids.map(id => renderersById[id]);
-  // TODO: support Fiber
-  renderers.forEach(renderer => {
-    const roots = renderer.Mount && renderer.Mount._instancesByReactRootID;
-    const { getNodeFromInstance } = renderer.ComponentTree;
-    if (!roots) {
+  ids.forEach(id => {
+    const renderer = renderersById[id];
+    const roots = hook.getFiberRoots(id);
+    if (!roots.size) {
       return;
     }
-    Object.keys(roots).forEach(key => {
-      function traverseDeep(ins, cb) {
-        cb(ins);
-        if (ins._renderedComponent) {
-          traverseDeep(ins._renderedComponent, cb);
-        } else {
-          for (let key in ins._renderedChildren) {
-            if (ins._renderedChildren.hasOwnProperty(key)) {
-              traverseDeep(ins._renderedChildren[key], cb);
-            }
-          }
-        }
-      }
-      const root = roots[key];
-      traverseDeep(root, inst => {
-        if (!inst._instance) {
-          return;
-        }
-        const { type, type: { __hot__id } } = inst._currentElement;
+    // TODO: this is WAY too brittle.
+    roots.forEach(root => {
+      const reactRoot = root.containerInfo._reactRootContainer;
+      traverseDeep(root.current, node => {
+        const type = node.type;
+        const { __hot__id } = type;
         if (
           types.find(
             t => t === type || (__hot__id && t.__hot__id === __hot__id)
           )
         ) {
-          nodes.push(getNodeFromInstance(inst));
-        }
-        const updater = inst._instance.updater;
-        if (!updater || typeof updater.enqueueForceUpdate !== 'function') {
-          return;
+          nodes.push(renderer.findHostInstanceByFiber(node));
         }
-        updater.enqueueForceUpdate(inst._instance);
+        node.memoizedProps = Object.assign({}, node.memoizedProps);
       });
+      reactRoot.render(root.current.memoizedState.element);
     });
   });
 }

packages/react-dev-utils/package.json

@@ -54,6 +54,7 @@
     "is-root": "1.0.0",
     "opn": "5.2.0",
     "pkg-up": "2.0.0",
+    "react-devtools-core": "2.1.9",
     "react-error-overlay": "^4.0.0",
     "recursive-readdir": "2.2.1",
     "shell-quote": "1.6.1",

packages/react-scripts/template/src/App.js

@@ -1,28 +1,26 @@
-import React, { Component } from 'react';
-import Logo from './Logo';
+import React from 'react';
+import Counter from './Counter';
+import logo from './logo.svg';
 import './App.css';
 
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
-      </div>
-    );
-  }
+export default function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+        </p>
+        <Counter />
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  );
 }
-
-export default App;

packages/react-scripts/template/src/Counter.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+
+export default class Counter extends Component {
+  state = { value: 0 };
+  componentDidMount() {
+    this.interval = setInterval(
+      () => this.setState(s => ({ value: s.value + 1 })),
+      1000
+    );
+  }
+  render() {
+    return <h1>{this.state.value}</h1>;
+  }
+}