Как бы вы реализовали mustComponentUpdate, используя useEffect в React?

Question

Я читал документы React, и он рекомендовал, если у вас есть какие-то реквизиты, которые будут часто меняться, хорошим методом жизненного цикла будет shouldComponentUpdate .

Мой вопрос: какВы бы использовали useEffect подход с функциональным компонентом, подобным следующему?

Это мой функциональный компонент:

function GenericIsUserLoggedInLink({ isLoggedIn, logOutUser, route, anchorText }) {

    const [setProps] = useState({isLoggedIn: isLoggedIn, route: route, anchorText:anchorText });
    console.log('setProps', setProps);

 useEffect((nextProps, nextState) => {
    if (setProps.isLoggedIn !== nextProps.setProps.isLoggedIn) {
      return true;
    }
    if (setProps.route !== nextProps.setProps.route) {
      return true;
    }
    if (setProps.anchorText !== nextProps.setProps.anchorText) {
      return true;
    }
    return false;
  });

 if (isLoggedIn) {
  if (anchorText === undefined) {
   return <Link href="/"><a onClick={() => logOutUser()}>Log out!</a></Link>
  } else if (anchorText) {
   return <Link href={route}><a >{anchorText}</a></Link>
  }
 } else {
  if (route === "/login") {
     return  <Link href="/login"><a >Log in!</a></Link>
  }
  return null
 }
}

Это был мой выбор, но это не такт работа! ХА! Есть ли кто-нибудь, кто может дать понимание?

ОБНОВЛЕНИЕ Я следовал предписанию Шубхэма, но столкнулся с этим?

ТАК, я сделал это ... Но мне кажется, что это не так: я думаю, что это не так, как я использую лексическая область видимости

var comparator;
const GenericIsUserLoggedInLink = React.memo(({ isLoggedIn, logOutUser, route, anchorText }) => {
 comparator = (prevProps, nextProps) => {
  if (prevProps.isLoggedIn !== nextProps.setProps.isLoggedIn) {
      return true;
    }
    if (prevProps.isLoggedIn !== nextProps.setProps.route) {
      return true;
    }
    if (prevProps.anchorText !== nextProps.setProps.anchorText) {
      return true;
    }
    return false;
}

   if (isLoggedIn) {
      if (anchorText === undefined) {
       return <Link href="/"><a onClick={() => logOutUser()}>Log out!</a></Link>
      } else if (anchorText) {
       return <Link href={route}><a >{anchorText}</a></Link>
      }
   } else {
      if (route === "/login") {
         return  <Link href="/login"><a >Log in!</a></Link>
      }
      return null
   }
}, comparator);

Answer 1

useEffect не подходит в качестве альтернативы shouldComponentUpdate для функциональных компонентов.

Скорее вам нужно использовать React.memo , чтобы предотвратить повторный рендеринг. Также вам не нужно поддерживать состояние для сравнения предыдущего и текущего реквизита.

const comparator = (prevProps, nextProps) => {
  if (prevProps.isLoggedIn !== nextProps.setProps.isLoggedIn) {
      return true;
    }
    if (prevProps.route !== nextProps.setProps.route) {
      return true;
    }
    if (prevProps.anchorText !== nextProps.setProps.anchorText) {
      return true;
    }
    return false;
}

const GenericIsUserLoggedInLink = React.memo(({ isLoggedIn, logOutUser, route, anchorText }) => {

   if (isLoggedIn) {
      if (anchorText === undefined) {
       return <Link href="/"><a onClick={() => logOutUser()}>Log out!</a></Link>
      } else if (anchorText) {
       return <Link href={route}><a >{anchorText}</a></Link>
      }
   } else {
      if (route === "/login") {
         return  <Link href="/login"><a >Log in!</a></Link>
      }
      return null
   }
}, comparator);