Sentry Answers>React>

Component State Should Always be Initialized Fully

Component State Should Always be Initialized Fully

Evan Hicks

—

The Problem

When you initialize the state for your component in the constructor, be aware that the component might render using that initial state. If you don’t properly initialize the state, this can cause bugs in your code.

Click to Copy
class Person extends Component {
    constructor(props) {
        super(props);

        this.state = {
            address: null,
        }
    }

    componentDidMount() {
        fetch("/api/v1/address").then(data => {
            this.setState({address: data})
        })
    }

    render() {
        return (
            <div>
                // This will throw an exception: "Cannot read property 'streetNumber' of null"
                <p>You live at {this.state.address.streetNumber} {this.state.address.streetName}</p>
            </div>
        )
    }
}

The Solution

This happens because a component can be rendered before componentDidMount is actually called, in which case it will be rendered using the initial value of the state. There is more than one solution to this problem. One way would be to initialize the state with dummy values:

Click to Copy
constructor(props) {
    super(props)

    this.state = {
        address: {
            streetNumber: '?',
            streetName: '?',
        }
    }
}

The better pattern however is to have a placeholder component like a loading spinner that is rendered while waiting for the API call to return.

Click to Copy
class Person extends Component {
    constructor(props) {
        super(props);

        this.state = {
            address: null,
        }
    }

    componentDidMount() {
        fetch("/api/v1/address").then(data => {
            this.setState({address: data})
        })
    }

    render() {
        if (this.state.address == null) {
            return (<div><p>Loading...</p></div>)
        }

        return (
            <div>
                <p>You live at {this.state.address.streetNumber} {this.state.address.streetName}</p>
            </div>
        )
    }
}

This way the user will know that the data is coming, and the component will correctly update once the data is retrieved.

Further Reading

If you’re looking to get a deeper understanding of how React application momitoring works, take a look at the following articles:

  • Sentry BlogHow to identify fetch waterfalls in React
  • Syntax.fmReact Server Components
  • Syntax.fmWhy the jQuery Creator Uses React and Typescript
  • Syntax.fmListen to the Syntax Podcast
  • Sentry BlogReact Native Debugging and Error Tracking During App Development
  • Syntax.fmDiscussion on building native iOS and Android apps with React Native
  • SentryReact Error & Performance Monitoring
  • Sentry BlogFixing memoization-breaking re-renders in React
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

learn more about sentryjoin our discord
© 2024 • Sentry is a registered Trademark of Functional Software, Inc.