add $F as a force property to the component instance

packages/inferno/__tests__/forceUpdate.spec.jsx

@@ -0,0 +1,214 @@
+import { Component, render, rerender } from 'inferno';
+
+describe('forceUpdate', () => {
+  let container;
+
+  beforeEach(function () {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(function () {
+    rerender(); // Flush pending stuff, if any
+    render(null, container);
+    document.body.removeChild(container);
+    container.innerHTML = '';
+  });
+
+  // https://jsfiddle.net/pnwLh7au/
+  it('Should have new state in render when changed state during setState + forceUpdate inside lifecycle methods and render only once', () => {
+    let updated = 0;
+
+    class Parent extends Component {
+      render() {
+        return (
+          <div>
+            <Child />
+          </div>
+        );
+      }
+    }
+
+    class Child extends Component {
+      state = {
+        foo: 'bar'
+      };
+
+      componentDidMount() {
+        this.setState({
+          foo: 'bar2'
+        });
+        this.forceUpdate();
+      }
+
+      componentDidUpdate() {
+        updated++;
+      }
+
+      render() {
+        return (
+          <div>
+            {this.state.foo}
+          </div>
+        );
+      }
+    }
+
+    render(<Parent />, container);
+    expect(container.firstChild.firstChild.innerHTML).toBe('bar');
+
+    rerender();
+
+    expect(container.firstChild.firstChild.innerHTML).toBe('bar2');
+    expect(updated).toBe(1);
+  });
+
+  it('Should ignore shouldComponentUpdate when forceUpdate called like React does', () => {
+    let updated = 0;
+
+    class Parent extends Component {
+      render() {
+        return (
+          <div>
+            <Child />
+          </div>
+        );
+      }
+    }
+
+    class Child extends Component {
+      state = {
+        foo: 'bar'
+      };
+
+      shouldComponentUpdate(prevProps, prevState) {
+        if (prevState.foo !== this.state.foo) {
+          return true;
+        }
+        return false;
+      }
+
+      componentDidMount() {
+        this.forceUpdate();
+      }
+
+      render() {
+        updated++;
+        return (
+          <div>
+            {this.state.foo}
+          </div>
+        );
+      }
+    }
+
+    render(<Parent />, container);
+    expect(container.firstChild.firstChild.innerHTML).toBe('bar');
+    expect(updated).toBe(1);
+
+    rerender();
+
+    expect(container.firstChild.firstChild.innerHTML).toBe('bar');
+    expect(updated).toBe(2);
+  });
+
+
+  // As per React https://jsfiddle.net/pnwLh7au/
+  // React has a different flow when setState is called outside lifecycle methods or event handlers (https://jsfiddle.net/egd1kuz6/),
+  // but inferno has another flow for setState and Inferno.
+  // Inferno collapses several `setState` even if they are called outside event listeners or lifecycle methods. So forceUpdate follows it
+  it('Should use the updated state when forceUpdate called like React does even if shouldComponentUpdate ignores it', () => {
+    let updated = 0;
+
+    class Parent extends Component {
+      render() {
+        return (
+          <div>
+            <Child />
+          </div>
+        );
+      }
+    }
+
+    class Child extends Component {
+      state = {
+        foo: 'bar'
+      };
+
+      shouldComponentUpdate() {
+        return false;
+      }
+
+      componentDidMount() {
+        this.setState({foo: 'bar2'})
+        this.forceUpdate();
+      }
+
+      render() {
+        updated++;
+        return (
+          <div>
+            {this.state.foo}
+          </div>
+        );
+      }
+    }
+
+    render(<Parent />, container);
+    expect(container.firstChild.firstChild.innerHTML).toBe('bar');
+    expect(updated).toBe(1);
+
+    rerender();
+
+    expect(container.firstChild.firstChild.innerHTML).toBe('bar2');
+    expect(updated).toBe(2);
+  });
+
+  // As per React https://jsfiddle.net/pnwLh7au/
+  it('Should use the updated state when forceUpdate called before setState like React does even if shouldComponentUpdate ignores it', () => {
+    let updated = 0;
+
+    class Parent extends Component {
+      render() {
+        return (
+          <div>
+            <Child />
+          </div>
+        );
+      }
+    }
+
+    class Child extends Component {
+      state = {
+        foo: 'bar'
+      };
+
+      shouldComponentUpdate() {
+        return false;
+      }
+
+      componentDidMount() {
+        this.forceUpdate();
+        this.setState({foo: 'bar2'})
+      }
+
+      render() {
+        updated++;
+        return (
+          <div>
+            {this.state.foo}
+          </div>
+        );
+      }
+    }
+
+    render(<Parent />, container);
+    expect(container.firstChild.firstChild.innerHTML).toBe('bar');
+    expect(updated).toBe(1);
+
+    rerender();
+
+    expect(container.firstChild.firstChild.innerHTML).toBe('bar2');
+    expect(updated).toBe(2);
+  });
+});

packages/inferno/src/core/component.ts

@@ -41,6 +41,9 @@ function queueStateChanges<P, S>(component: Component<P, S>, newState: any, call
     if (QUEUE.indexOf(component) === -1) {
       QUEUE.push(component);
     }
+    if (force) {
+      component.$F = true;
+    }
     if (!microTaskPending) {
       microTaskPending = true;
       nextTick(rerender);
@@ -74,7 +77,9 @@ export function rerender() {
 
   while ((component = QUEUE.shift())) {
     if (!component.$UN) {
-      applyState(component, false);
+      const force = component.$F;
+      component.$F = false;
+      applyState(component, force);
 
       if (component.$QU) {
         callSetStateCallbacks(component);
@@ -136,6 +141,7 @@ export class Component<P = {}, S = {}> implements IComponent<P, S> {
   public $SSR?: boolean; // Server side rendering flag, true when rendering on server, non existent on client
   public $L: Function[] | null = null; // Current lifecycle of this component
   public $SVG: boolean = false; // Flag to keep track if component is inside SVG tree
+  public $F: boolean = false; // Force update flag
 
   constructor(props?: P, context?: any) {
     this.props = props || (EMPTY_OBJ as P);