Sentry Answers>React>

Modifying State of a Component Directly

Modifying State of a Component Directly

Evan Hicks

The Problem

The state of a component is managed internally by React. Updating the state of a component directly can have unintended consequences that can be difficult to debug.

Click to Copy
class Counter extends Component { constructor(props) { super(props) this.state = { counter: 0, } } increment() { this.state.counter = this.state.counter + this.props.increment } }

If the state is updated directly as in the example above, the component will not rerender since the state is compared shallowly. Additionally, the update may be lost if there are other state changes queued asynchronously using setState.

Another common problem is using the current state/props to update the new state.

Click to Copy
class Counter extends Component { constructor(props) { super(props) this.state = { counter: 0, } } increment() { this.setState({ counter: this.state.counter + this.props.increment }) } }

This will potentially cause issues due to a potential race condition between other state/prop changes and this particular state update. What happens if the props and/or state change before this state update happens?

The Solution

The solution for the first example is to always use the setState function to ensure state changes are properly queued. For the second problem, React provides a different version of setState that takes a function instead of an object.

Click to Copy
class Counter extends Component { constructor(props) { super(props) this.state = { counter: 0, } } increment() { this.setState((prevState, props) => ({ counter: prevState.counter + props.increment }) } }

This will ensure that the state change happens with the correct version of the previous state and props.

Further Reading

If you’re looking to get a deeper understanding of how JavaScript error reporting works, take a look at the following articles:

  • Sentry BlogGuide to Error & Exception Handling in React
  • Sentry BlogHow to identify fetch waterfalls in React
  • Syntax.fmReact Server Components
  • Sentry BlogSentry can’t fix React hydration errors, but it can really help you debug them
  • 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
  • SentryReact Debug Hub
  • 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.

© 2024 • Sentry is a registered Trademark of Functional Software, Inc.