How to render React components only once on startup?
Pure components should solve your problem because they implement shallow prop and state comparison by default.
If your React component's render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.
One way to make sure a React component is rendered only once, is by making shouldComponentUpdate return false:
class MyComponent extends React.Component { shouldComponentUpdate = () => false render() { return <div>{ this.props.children }</div>; }}In the example above, even if this.props.children changes, the component won't render again. It will render only once, when mounted.