Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React component to handle client-server render inconsistency
/*
* ClientRender helps to avoid server-client render inconsistency.
*
* I.E. client render depends on data from LocalStorage
*
* Usage:
*
* r(ClientRender, {server: 'Rendered on server'}, 'Rendered on client')
*/
import {Component} from 'react'
export default class ClientRender extends Component {
state = {loaded: false}
componentDidMount() {
setTimeout(() => {
this.setState({loaded: true})
}, 1)
}
render() {
if (!this.state.loaded) {
return this.props.server
}
return this.props.children
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment