Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
date title thumbnail slug template categories tags
Fixing React Warning: Synthetic Events in setState()


Problems Using Within setState()

I came across an unexpected console error and warning when attempting to use within setState().

Uncaught TypeError: Cannot read property 'value' of null
Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property 'target' on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().

An example of the code I was attempting to run was: (Open up the console and try to run the demo in preview view to see the error)

<iframe src="" style="width:100%; height:1200px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

React Event System: SyntheticEvent

It turns out React has it's own event system for event handling, using SyntheticEvent.

React's SyntheticEvent wraps around the browser's native event to provide cross-browser compatibility support. Instead of passing in the native event to React event handlers, an instance of this SyntheticEvent is passed in.

The console warning I encountered occurs because React re-uses the SyntheticEvent object for performance reasons, by pooling the synthetic events all together. Thus, all the properties on are nullified after an event callback is invoked.

Essentially, SyntheticEvent cannot be used asynchronously, because the event will no longer exist after the event callback has been invoked.

This is a problem, knowing that React's setState() behavior is asynchronous.

However, what if I want to use within setState()?

  handleChange(e) {
    this.setState((prevState, props) => {
      return {
        username:     // Attempting to use
                                     // within setState()

  render() {
    return (

Solution 1: Use React event.persist()

Using to construct a new state is a common pattern, and React has provided a solution with event.persist().

Calling event.persist() on the event removes the synthetic event from the pool and allows references to the event to be retained asynchronously. js

  handleChange(e) {

    this.setState((prevState, props) => {
      return {

Solution 2: Cache

Another solution is to cache the result of within the event handler, and reference this cached value within the setState() callback.

  handleChange(e) {
    let inputValue =;  // Cache the value of

    this.setState((prevState, props) => {
      return {
        username: inputValue