Replacing getDerivedStateFromProps with useEffect

Question

I'm converting a class component to a function component and wanted to see if useEffect() could replace the following static function

static getDerivedStateFromProps(props) {
    const { path } = props.match;
    if (path === '/login') {
      return { loginStatus: true };
    } else {
      return { loginStatus: false };
    }
  }

Following is the new replacement function. It's doing what it's supposed to be doing, which is to change the state according to the props, but I'm not too familiar with useEffect() and I'm just wondering if I'm not losing anything by converting to this.

const { path } = props.match
useEffect(() => {
    if (path ==='/login'){
        setLoginStatus(true)
    } else {
    setLoginStatus(false)
    }
}, [ path ])

Answer 1

You should check the docs

You can have a state for the previous path and the current path and only call setLoginStatus when they are different.

If you only want to setLoginStatus(true) when path == 'login' then using the useEffect is correct.

This part of the code will only run when path changes. And this happens because of [ path ].

useEffect(() => {
    if (path ==='/login'){
        setLoginStatus(true)
    } else {
    setLoginStatus(false)
    }
}, [ path ])

And if you are using some router, probably your effect will run only in the initial render.

I'm just wondering if I'm not losing anything by converting to this.

No, it's fine, that's the way you should do it

Also take a look at You Probably Don't Need Derived State

And here