how to asynchronously render a functional component in react?

Question

Basically, I need to render a component based on a state that is set asynchronously, by default the state is "false", so the component mounts and throws the return that corresponds to the false option but it does not wait for the premise that updates the state.

export const LayoutValidator=({children})=>{

  const [auth,setAuth] = useState(undefined)
  const {token} = JSON.parse(localStorage.getItem("loggedUser")||'{}');
  
  fetch(`${urlValue}/api/validate-token`,{
    method:"POST",
    headers:{
      authorization: token,
    }
  })
  .then(ans=>ans.json())
  .then(ans=>setAuth(ans.auth))
  .catch(err=>console.log(err))

  return auth ? children : <Navigate to="/" />
}

How may I set this component to wait for the premise before returning its answer?

You need a third state, "loading". Don't redirect the user until you confirmed that their token is not valid. — Bergi
– Bergi, Commented Jan 5, 2022 at 2:53
Yes, Sr.! it was implemented out of this component, the authentication logic for this app has certain intricacies that I omitted for this question. — Cristian Diaz
– Cristian Diaz, Commented Jan 5, 2022 at 2:55
Oh, and also make sure to put fetch() in a useEffect hook, so that it won't run again and again on every render. — Bergi
– Bergi, Commented Jan 5, 2022 at 3:01
What do you mean by "too late"? The state is updated (setAuth(ans.auth)) after the first render anyway because the http request is asynchronous and takes some time. That's why you need to the "loading" state. — Bergi
– Bergi, Commented Jan 5, 2022 at 3:06
For example by distinguishing auth between undefined, true and false, or any other trinary logic. Render nothing (null) or a loading indicator in the loading state. (And actually you might want a fourth state for errors, to render a message in the component instead of logging to the console and keeping the display in loading otherwise) — Bergi
– Bergi, Commented Jan 5, 2022 at 3:26

muka.gergely · Accepted Answer · 2022-01-05 10:43:24Z

1

You could create your custom "fetching hook" and there you can fetch the data and set the loading state:

const { useEffect, useState } = React

const useFetchUsers = () => {
  const [users, setUsers] = useState([])
  const [loading, setLoading] = useState(false)
  
  useEffect(() => {
    setLoading(() => true)
    // setTimeout added to emphasize async nature
    setTimeout(() => {
      fetch('https://jsonplaceholder.typicode.com/users/')
        .then(response => response.json())
        .then(json => setUsers(() => json))
        .finally(setLoading(() => false))
    }, 1000)
    
  }, [])
  
  return {
    users,
    loading,
  }
}

const UserItem = ({ id, name, username, email }) => {
  return (
    <div>
      {name} - {username} - {email}
    </div>
  )
}

const App = () => {
  const { users, loading } = useFetchUsers()
  
  return (
    <div>
      {
        !loading
        ? users.map((user) => {
          return (
            <UserItem
              key={user.id}
              {...user}
            />
          )
        })
        : "Loading users..."
      }
    </div>
  )
}

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

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

answered Jan 5, 2022 at 10:43

muka.gergely

8,3593 gold badges20 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cristian Diaz Over a year ago

Thanks a lot Sir for your help, you sent me in the right direction.

Cristian Diaz · Accepted Answer · 2022-01-05 18:10:30Z

Ok so this was not as trivial as I thought (at least for me), huge thanks to @Bergi and to @muka.gergely and the authors of this resource that helped me get the final solution: https://www.debuggr.io/react-update-unmounted-component/

This is what I came with:

export const LayoutValidator=({children})=>{
  const {invalid, auth} = useFetchToken()
  return !invalid ? <Intermediate children={children}/> : <Navigate to="/" />
}

function Intermediate ({children}) {
  const {invalid, auth} = useFetchToken()
  return !auth ? <SplashScreen/> : children
}

function useFetchToken() {

  const { token } = JSON.parse(localStorage.getItem("loggedUser") || '{}')
  const [invalid, setInvalid] = useState(false)
  const [auth, setAuth] = useState(false)

  useEffect(()=>{
    let mounted = true
    setInvalid(() => true)
    fetch(`${urlValue}/api/validate-token`, {
    method: "POST",
    headers: {
      authorization: token,
    }
  })
    .then(ans => ans.json())
    .then(ans => mounted && setAuth(()=>ans.auth))
    .catch(err => console.log(err))
    .finally(setInvalid(()=>false))

    return () => mounted = false;
  },[])
  return {invalid, auth}
}

In my situation, it worked perfectly, hope this helps someone in the future.

Collectives™ on Stack Overflow

how to asynchronously render a functional component in react?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related