# Initialize React Component State to Avoid Null Errors

> Prevent Cannot read property of null errors by fully initializing component state in the constructor or rendering a loading placeholder until data arrives

**URL:** https://sentry.io/answers/not-initializing-component-state/

---

## 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.

```jsx
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:

```jsx
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.

```jsx
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 monitoring works, take a look at the following articles:

- [Debug tough front end errors by giving Sentry more clues](https://blog.sentry.io/debug-tough-front-end-errors-sentry-clues/)
- [See how Aumni keeps errors out of userland](https://sentry.io/customers/aumni/)
- [Get started with the React SDK (docs)](https://docs.sentry.io/platforms/javascript/guides/react/)

---

*Source: [sentry.io/answers/not-initializing-component-state/](https://sentry.io/answers/not-initializing-component-state/)*