Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

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

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>

7 months ago · Juan Pablo Isaza Report

0

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.

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.