Problem

The accepted answer:

const initialState = 
 /* etc */
;

class MyComponent extends Component 
 constructor(props) 
 super(props)
 this.state = initialState;
 
 reset() 
 this.setState(initialState);
 
 /* etc */

unfortunately is not correct.

initialState is passed as a reference to this.state, so whenever you change state you also change initialState (const doesn't really matter here). The result is that you can never go back to initialState.

Solution

You have to deep copy initialState to state, then it will work. Either write a deep copy function yourself or use some existing module like this.

This is the solution implemented as a function:

Class MyComponent extends React.Component 
 constructor(props) 
 super(props);
 this.state = this.getInitialState();
 

 getInitialState = () => 
 const initialState = 
 /* state props */
 ;
 return initialState;
 

 resetState = () => 
 this.setState(this.getInitialState());
 

The solutions that involve setting this.state directly aren't working for me in React 16, so here is what I did to reset each key:

 const initialState = example: 'example' 
 ...
 constructor() 
 super()
 this.state = initialState
 
 ...
 reset() 
 const keys = Object.keys(this.state)
 const stateReset = keys.reduce((acc, v) => ( ...acc, [v]: undefined ), )
 this.setState( ...stateReset, ...initialState )
 

First, you'll need to store your initial state when using the componentWillMount() function from the component lifecycle:

componentWillMount() 
 this.initialState = this.state

This stores your initial state and can be used to reset the state whenever you need by calling

this.setState(this.initialState)

I will add to the above answer that the reset function should also assign state like so:

reset() 
 this.state = initialState;
 this.setState(initialState);

The reason being that if your state picks up a property that wasn't in the initial state, that key/value won't be cleared out, as setState just updates existing keys. Assignment is not enough to get the component to re-render, so include the setState call as well -- you could even get away with this.setState() after the assignment.

const initialState = 
 a: '',
 b: '',
 c: ''
;

class ExampleComponent extends Component 
 state = ...initialState // use spread operator to avoid mutation
 handleReset = this.handleReset.bind(this);

 handleReset() 
 this.setState(initialState);
 
 

Remember that in order to be able to reset the state it is important not to mutate initialState.

state = ...initialState // GOOD 
// => state points to a new obj in memory which has the values of initialState

state = initialState // BAD 
// => they point to the same obj in memory

The most convenient way would be to use ES6 Spread Operator. But you could also use Object.assign instead. They would both achieve the same.

state = Object.assign(, initialState); // GOOD
state = ...initialState; // GOOD

This is how I handle it:

class MyComponent extends React.Component
 constructor(props)
 super(props);
 this._initState = 
 a: 1,
 b: 2
 
 this.state = this._initState;
 

 _resetState()
 this.setState(this._initState);
 

Update:
Actually this is wrong. For future readers please refer to @RaptoX answer.
Also, you can use an Immutable library in order to prevent weird state modification caused by reference assignation.

In most cases you dont need a deep copy, rarely initial state is object of objects, so using spread operator which babel transpiles to the object.assign should be fine.

So, inside constructor you would have:

 class MyComponent extends Component 
 constructor(props) 
 super(props)
 this.state = 
 key: value,
 key2: value
 
 this.initialState = ...this.state 
 
 

From there you can use

this.setState(this.initialState);

to reset. But if for some reason your initial state is more complex object, use some library.

In some circumstances, it's sufficient to just set all values of state to null.

If you're state is updated in such a way, that you don't know what might be in there, you might want to use

this.setState(Object.assign(...Object.keys(this.state).map(k => ([k]: null))))

Which will change the state as follows

foo: 1, bar: 2, spam: "whatever" > foo: null, bar: null, spam: null

Not a solution in all cases, but works well for me.

class x extends Components {
constructor() 
 super();
 this.state = 

 name: 'mark',
 age: 32,
 isAdmin: true,
 hits: 0,

 // since this.state is an object
 // simply add a method..

 resetSelectively() 
 //i don't want to reset both name and age
 // THIS IS FOR TRANSPARENCY. You don't need to code for name and age
 // it will assume the values in default..
 // this.name = this.name; //which means the current state.
 // this.age = this.age;


 // do reset isAdmin and hits(suppose this.state.hits is 100 now)

 isAdmin = false;
 hits = 0;
 // resetSelectively..

//constructor..

/* now from any function i can just call */
myfunction() 
 /**
 * this function code..
 */
 resetValues();

// myfunction..

resetValues() 
 this.state.resetSelectively();
//resetValues

/////
//finally you can reset the values in constructor selectively at any point

...rest of the class..

//class