title: How to run a function when user clicks the back button, in React.js?
body: <p>I looked around and tried to find a solution with React router.
  With V5 you can use <code>&lt;Promt /&gt;</code>.<br />
  I tried also to find a vanilla JavaScript solution, but nothing worked for me.</p>
  <p>I use React router v6 and <code>histroy</code> is replaced with <code>const navigate = useNavigation()</code> which doesn't have a <code>.listen</code> attribute.</p>
  <p>Further v6 doesn't have a <code>&lt;Promt /&gt;</code> component.</p>
  <p>Nevertheless, at the end I used <code>useEffect</code> clear function. But this works for all changes of component. Also when going forward.</p>
  <p>According to the react.js <a href="https://reactjs.org/docs/hooks-effect.html#:%7E:text=React%20performs%20the%20cleanup%20when,running%20the%20effects%20next%20time." rel="nofollow noreferrer">docs</a>, <em>&quot;React performs the cleanup when the component unmounts.&quot;</em></p>
  <pre class="lang-js prettyprint-override"><code> useEffect(() =&gt; {
      // If user clicks the back button run function
      return resetValues();;
    })
  </code></pre>