Can I block prerender children on React Fiber?

Question

I wrote component on React Fiber. This component receive 1 cond props, and that is true, render children.

"use strict";
import * as React from "react";
import * as ReactDOM from "react-dom";

interface IfProps {
  cond: boolean;
}

export class If extends React.Component<IfProps, {}> {
  render() {
    const {cond, children} = this.props;

    if (cond) {
      return children;
    } else {
      return null;
    }
  }
}

class TopComponent extends React.Component {
  render() {
    let str: any = null;

    return (
      <div>
        <If cond={str != null}>
          This part not showed.
          {str.length}
        </If>
      </div>
    );
  }
}

ReactDOM.render(<TopComponent />, document.getElementById("app"));

Before React Fiber, this code works. But now, React Fiber causes error.

Uncaught TypeError: Cannot read property 'length' of null

I guess that React Fiber render children before component is rendered. But this behavior break component.

Can I stop prerender children of component?

Answer 1

The problem in your case isn't that react doesn't accept a null return value. (Which it does ReactComponent.render) But your the children will get evaluated before they get handed over to the If component which means that str.length throws the error you're seeing.

Basic example based on your code.