Question

0

79

Views

how to asynchronously render a functional component in react?

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?

7 months ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-05T13:07:25.554Z

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>

Answer 2 · 2022-07-05T13:07:25.562Z

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.