Dziwna kolejność renderowania w React dla OR [React.js]

Question

Cześć,
Napotkałem taki problem i nie bardzo rozumiem skąd może wynikać. Podczas załączania strony opartej o React'a mam w głównym komponencie App prostą logikę wyboru w zależności od stanu z ciasteczek. Wykonsolowałem wartość, jaka jest w obiekcie i obiekt na każdym swoim etapie dobrze widzi wartość true z cookie.
Nie rozumiem do końca dlaczego dla następującego fragmentu kodu...

import React, { useState } from "react";
import Cookies from 'js-cookie';

function App() {
  const auth = Cookies.get('X')
  const [authorized, setAuthorized] = useState(auth)
  console.log('auth', auth, authorized) //zwraca 'auth true true' każdorazowo

return (
    <div className="App">
      {authorized === false ? (
        <PanelA />
      ) : (
        <PanelB />
      )
)
}

... działa to tak, że wpierw pomimo stanu true mi renderuje, jakby to był false (zauważalne dla oka), następnie przerenderowuje się i ustawia się poprawnie do true. Co równie ciekawe, jak zamienie kolejność na:
 

 {authorized === true ? (
        <PanelB />
      ) : (
        <PanelA />
      )

jest odwrotny problem. 

Próbowałem wcześniej wczytać już cookie na poziomie index.js i propsami przekazać i wartość domyślną stanu ustawić z propsów ale jest ten sam rezultat.

Czy ma ktoś pomysł, w jaki sposób mógłbym to naprawić? :( Z góry dzięki

Answer 1

Nvm, okazało się, że biblioteka Cookie zwracała mi string, który był wpisywany w state, a dopiero potem był traktowany jako boolean, pomogło rzutowanie z samego początku na boolean, tzn. 

  const auth = (Cookies.get('X') === 'true')