react-render-only-on-client.md

The example of how to render something only on client side

Inspired by facebook/react#10923 (comment)

class OnlyOnClient extends Component {
  static propTypes = {
    placeholder: PropTypes.node,
    html: PropTypes.string
  };

  state = {
    onClient: false
  };

  shouldComponentUpdate() {
    return !this.state.onClient;
  }

  componentDidMount() {
    this.setState({
      onClient: true
    });
  }

  render() {
    if (!this.state.onClient) {
      return this.props.placeholder;
    }

    return <div dangerouslySetInnerHTML={{ __html: this.props.html }} />;
  }
}

const Graphics = () => (
  <div>
    This text can re-render
    <OnlyOnClient
      placeholder={
        <div style={{ height: 200 }}>
          Try to reserve best guess height, placeholder graphic, etc
        </div>
      }
      html={"<div>d3 graphics etc</div>"} // this won't re-render
    />
    Okay to re-render here too
  </div>
);