Как управлять условными компонентами с помощью хуков

Question

Предположим, у вас есть код ниже index.js:

const App = memo(props => {

    return (
        <Layout>
        // you can consider below code as a switch case 
        {
          {
            'NO_SESSION': <Login />,
            'NOTCONFIRMED_SESSION': <Confirm />
            'CONFIRMED_SESSION': <Home />
          }[sessionState]
        }
        </Layout>
    );
});

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

sessionState является результатом некоторой логики, зависящей от IndexedDB. Код выглядит примерно так:

const getSessionState = () => {
   if(// there is no session) 
      return "NO_SESSION"
   else if(// there is not confirmed session)
      return "NOTCONFIRMED_SESSION"
   else if(// there is confirmed session)
      return "CONFIRMED_SESSION"
}

Итак, мои вопросы:

Разумно ли делать это, используя react-hooks?

Если да, то как реализовать?

Answer 1

Да, можно использовать хуки, но более уместный вопрос, который вам следует задать, - использовать ли вам состояние компонента или контекст. В случае глобального состояния контекст имеет больше смысла, так как это может понадобиться в нижестоящих компонентах.

Вы можете сохранить это состояние в контексте и прочитать состояние входа в систему, используя useContext.