As I know (by reading react docs) - there is no way to do so yet.

You could use one state variable as described in the FAQ here: https://reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables

It depends on your use case of course.

Rekeying the component from the parent container would also reset it automatically of course.

There is no built-in way to set the state to its initial value, sadly.

Your code looks good, but if you want to decrease the functions needed you can put your entire form state in a single state variable object and reset to the initial object.

Example

const { useState } = React;


function signupUser() {
return new Promise(resolve => {
setTimeout(resolve, 1000);
});
}


const initialState = {
username: "",
email: "",
password: "",
passwordConfirmation: ""
};


const Signup = () => {
const [
{ username, email, password, passwordConfirmation },
setState
] = useState(initialState);


const clearState = () => {
setState({ ...initialState });
};


const onChange = e => {
const { name, value } = e.target;
setState(prevState => ({ ...prevState, [name]: value }));
};


const handleSubmit = e => {
e.preventDefault();
signupUser().then(clearState);
};


return (
<form onSubmit={handleSubmit}>
<div>
<label>
Username:
<input value={username} name="username" onChange={onChange} />
</label>
</div>
<div>
<label>
Email:
<input value={email} name="email" onChange={onChange} />
</label>
</div>
<div>
<label>
Password:
<input
value={password}
name="password"
type="password"
onChange={onChange}
/>
</label>
</div>
<div>
<label>
Confirm Password:
<input
value={passwordConfirmation}
name="passwordConfirmation"
type="password"
onChange={onChange}
/>
</label>
</div>
<button>Submit</button>
</form>
);
};


ReactDOM.render(<Signup />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>


<div id="root"></div>

Alongside the other answers, I'd recommend picking up a helper library like this, or making your own abstraction on top of hooks, if this is something you'll be doing often.

useState and friends are really just low-level primitives for you, the user, to build more useful hooks on top of it. I have projects where raw useState calls are actually fairly uncommon.

I had a similar use case. Completelty unrelated from a Login, Signup mechanism but I changed it to be related to your use case.

An easy way to solve this is with a parent component in my opinion.

const initUser = {
name: '',
email: '',
password: '',
passwordConfirmation: ''
}


const LoginManager = () => {
const [user, setUser] = useState(initUser)


return <Signup user={user} resetUser={setUser} />
}


const Signup = ({user, resetUser}) => {
const [username, setUsername] = useState(user.name)
const [email, setEmail] = useState(user.email)
const [password, setPassword] = useState(user.password)
const [passwordConfirmation, setPasswordConfirmation] = useState(user.passwordConfirmation)




const handleSubmit = signupUser => e => {
e.preventDefault()
signupUser().then(data => {
console.log(data)
resetUser(initUser) // <-----------
})
}


return <JSX />
}


export default Signup

I think the voted answer is still correct, but recently React released the new built-in useReducer which, in their own words, is

handy for resetting the state later in response to an action

https://reactjs.org/docs/hooks-reference.html#usereducer

Also it states that it's usually preferable useReducer when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.

Using the same sample on the voted answer, you could use useReducer like this:

Javascript

import React, { useReducer } from "react";


const initialState = {
username: "",
email: "",
password: "",
passwordConfirmation: "",
};


const reducer = (state, action) => {
if (action.type === "reset") {
return initialState;
}


const result = { ...state };
result[action.type] = action.value;
return result;
};


const Signup = () => {
const [state, dispatch] = useReducer(reducer, initialState);
const { username, email, password, passwordConfirmation } = state;


const handleSubmit = e => {
e.preventDefault();


/* fetch api */


/* clear state */
dispatch({ type: "reset" });
};


const onChange = e => {
const { name, value } = e.target;
dispatch({ type: name, value });
};


return (
<form onSubmit={handleSubmit}>
<div>
<label>
Username:
<input value={username} name="username" onChange={onChange} />
</label>
</div>
<div>
<label>
Email:
<input value={email} name="email" onChange={onChange} />
</label>
</div>
<div>
<label>
Password:
<input
value={password}
name="password"
type="password"
onChange={onChange}
/>
</label>
</div>
<div>
<label>
Confirm Password:
<input
value={passwordConfirmation}
name="passwordConfirmation"
type="password"
onChange={onChange}
/>
</label>
</div>
<button>Submit</button>
</form>
);
};


export default Signup;

Typescript

import React, { FC, Reducer, useReducer } from "react";


interface IState {
email: string;
password: string;
passwordConfirmation: string;
username: string;
}


interface IAction {
type: string;
value?: string;
}


const initialState: IState = {
email: "",
password: "",
passwordConfirmation: "",
username: "",
};


const reducer = (state: IState, action: IAction) => {
if (action.type === "reset") {
return initialState;
}


const result: IState = { ...state };
result[action.type] = action.value;
return result;
};


export const Signup: FC = props => {
const [state, dispatch] = useReducer<Reducer<IState, IAction>, IState>(reducer, initialState, () => initialState);
const { username, email, password, passwordConfirmation } = state;


const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();


/* fetch api */


/* clear state */
dispatch({ type: "reset" });
};


const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
dispatch({ type: name, value });
};


return (
<form onSubmit={handleSubmit}>
<div>
<label>
Username:
<input value={username} name="username" onChange={onChange} />
</label>
</div>
<div>
<label>
Email:
<input value={email} name="email" onChange={onChange} />
</label>
</div>
<div>
<label>
Password:
<input
value={password}
name="password"
type="password"
onChange={onChange}
/>
</label>
</div>
<div>
<label>
Confirm Password:
<input
value={passwordConfirmation}
name="passwordConfirmation"
type="password"
onChange={onChange}
/>
</label>
</div>
<button>Submit</button>
</form>
);
};

Notice that I created this reducer function const to be as generic as possible, but you can completely change it and test different action types (other than simply state property names) and perform complex calculations before returning the state modified. There are some examples in the link provided above.

This is how you can reset input values(from object) in hooks after form submission.

You can define multiple input values in same useState like firstName, lastName, etc...

const [state, setState] = React.useState({ firstName: "", lastName: "" });

Sample code.

export default function App() {
const [state, setState] = React.useState({ firstName: "", lastName: "" });
const handleSubmit = e => {
e.preventDefault();
setState({firstName:'',lastName:''})
};
const handleChange = e => {
const { name, value } = e.target;
setState({ ...state, [name]: value });
};
console.log(state)
return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="firstName"
placeholder="Enter first name"
value={state.firstName}
onChange={handleChange}
/>
<input
type="text"
name="lastName"
placeholder="Enter last name"
value={state.lastName}
onChange={handleChange}
/>
<input type="submit" value="Submit" />
</form>
);
}

If you want multiple input to define in object instead of declaring seperately.

You could have used useRef in hooks something like this

 const myForm = useRef(null)


const submit = () => {


myForm.current.reset(); // will reset the entire form :)


}


<form ref={myForm} onSubmit={submit}>


<input type="text" name="name" placeholder="John Doe">


<input type="email" name="name" placeholder="usman@gmail.com">


<button type="submit">Submit</button>


</form>

If you want a quick n' dirty method you could try just changing the component's key which will cause React to unmount your old component instance and mount a fresh one.

I am using Lodash here to generate a unique throwaway ID but you could also probably get away with Date.now() or similar, assuming the time resolution needed is above 1 millisecond.

I am passing the key a second time as debugKey to make it easier to see what's going on but this is not neccessary.

const StatefulComponent = ({ doReset, debugKey }) => {
const [counter, setCounter] = React.useState(0);
const increment = () => setCounter(prev => prev + 1);
return (
<React.Fragment>
<p>{`Counter: ${counter}`}</p>
<p>{`key=${debugKey}`}</p>
<button onClick={increment}>Increment counter</button>
<button onClick={doReset}>Reset component</button>
</React.Fragment>
);
};


const generateUniqueKey = () => `child_${_.uniqueId()}`;


const App = () => {
const [childKey, setChildKey] = React.useState(generateUniqueKey());
const doReset = () => setChildKey(generateUniqueKey());
return (
<div className="App">
<StatefulComponent key={childKey} debugKey={childKey} doReset={doReset} />
</div>
);
}


const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>




<div id="root"></div>

Short answer

This has a very simple solution. You can change the key prop where the rendering component. e.g when we have a component for editing we can pass a different key to clear previous states.

return <Component key={<different key>} />

I just wrote a custom hook that returns the actual hooks, along with a resetState function.

Usage:

const [{
foo: [foo, setFoo],
bar: [bar, setBar],
},
resetState,
] = useStateWithReset({
foo: null,
bar: [],
})


// - OR -


const [
[foo, setFoo],
[bar, setBar],
],
resetState,
] = useStateWithReset([
null,
[],
])

The latter is less readable but the former duplicates the keys, so there isn't a perfect solution.

The code:

const useStateWithReset = initialState => {
const hooksArray = Object.fromEntries(
Object.entries(initialState).map(([k, v]) => {
return [k, useState(v)]
})
);
const resetState = () =>
Object.entries(initialState).map(
([k, v]) => hooksArray[k][1](v)
);
return [hooksArray, resetState];
};

You can 'wrap' your useState in another use[Whatever name you want] and include a reset function - i.e. like a custom hook as suggested by Augustin in his answer.

Taking the example of an input form, as there is a good real example you can use and view the source of as noted below, you would use the custom hook similar to this:

function ContactForm(props) {
const [state, handleSubmit, reset] = useForm("contactForm");


const clearForm = e => {
e.preventDefault();
reset();  // <---- the extra reset function
// Any other code you want like hiding
// or removing the form div from the
// DOM etc.
}


if (state.succeeded) {
return (
<React.Fragment>
<p>Thanks fro your input!</p>
<button className="default-button" onClick={clearForm}>Ok</button>
</React.Fragment>
);
}
return (
<form onSubmit={handleSubmit}> // <-- the standard setSate type function
<label htmlFor="email" className="form-element">
Email Address
</label>
<input
id="email"
type="email"
name="email"
className="form-element"
/>
// etc - Your form code...
<button className="default-button" type="submit" disabled={state.submitting}>
Submit
</button>
</form>
);
}

You can see this in action in the fomrspree git respoitory react examples (at the time of writing) - the function is defined in the useForm source and there is an example of its use in 'useForm.test.js':

• https://github.com/formspree/formspree-react

One way to achieve this "reset states to initial" is by using the use-state-with-deps package.

Example:

import {useStateWithDeps} from "use-state-with-deps";


const Signup = () => {
const [generation, setGeneration] = useState(0);


const [username, setUsername] = useStateWithDeps("", [generation])
const [email, setEmail] = useStateWithDeps("", [generation])
const [password, setPassword] = useStateWithDeps("", [generation])
const [passwordConfirmation, setPasswordConfirmation] = useStateWithDeps("", [generation])


const clearState = () => {
setGeneration(generation + 1);
}


const handleSubmit = signupUser => e => {
e.preventDefault()
signupUser().then(data => {
console.log(data)
clearState()
})
}


return <JSX />
}


export default Signup

If you don't want to pull in a new dependency, you can find other solutions in this thread, which are short enough to just include directly in your project (eg. in a "utils" file). For example, this solution is only 20 lines long.

const handleSubmit = e => {
e.preventDefault();
reset();
}