Accepted answer

to ensure that the implicit browser state you mention and state of children is reset, you can add a key attribute to the root-level component returned by render; when it changes, that component will be thrown away and created from scratch.

render: function() {
    // ...
    return <div key={uniqueid}>

there's no shortcut to reset the individual component's local state.


maybe you can use the method reset() of the form:

import { useref } from 'react';

interface props {
    data: string;

function demo(props: props) {
    const formref = useref<htmlformelement | null>(null);

    function resethandler() {

        <form ref={formref}>
            <input defaultvalue={}/>
            <button onclick={resethandler}>reset</button>


the approach where you add a key property to the element and control its value from the parent works correctly. here is an example of how you use a component to reset itself.

the key is controlled in the parent element, but the function that updates the key is passed as a prop to the main element. that way, the button that resets a form can reside in the form component itself.

const innerform = (props) => {
  const { resetform } = props;
  const [value, setvalue] = usestate('initialvalue');

  return (
      value: {value}
      <button onclick={() => { setvalue('newvalue'); }}>
        change value
      <button onclick={resetform}>
        reset form

export const app = (props) => {
  const [resetheuristickey, setresetheuristickey] = usestate(false);
  const resetform = () => setresetheuristickey(!resetheuristickey);
  return (
      <innerform key={resetheuristickey} resetform={resetform} />


you should actually avoid replacestate and use setstate instead.

the docs say that replacestate "may be removed entirely in a future version of react." i think it will most definitely be removed because replacestate doesn't really jive with the philosophy of react. it facilitates making a react component begin to feel kinda swiss knife-y. this grates against the natural growth of a react component of becoming smaller, and more purpose-made.

in react, if you have to err on generalization or specialization: aim for specialization. as a corollary, the state tree for your component should have a certain parsimony (it's fine to tastefully break this rule if you're scaffolding out a brand-spanking new product though).

anyway this is how you do it. similar to ben's (accepted) answer above, but like this:


also (like ben also said) in order to reset the "browser state" you need to remove that dom node. harness the power of the vdom and use a new key prop for that component. the new render will replace that component wholesale.



adding a key attribute to the element that you need to reinitialize, will reload it every time the props or state associate to the element change.

key={new date().gettime()}

here is an example:

render() {
  const items = (this.props.resources) || [];
  const totalnumberofitems = (this.props.resources.noofitems) || 0;

  return (
    <div classname="items-container">
        key={new date().gettime()}

Related Query

More Query from same tag