React Js - How To Prevent Rendering Before State Being Updated [hooks]

I have a component which fetch data from an API to display some details to user: const ItemDetail = ({match}) => { const [item, setItem] = useState(null); useEffect(()

Solution 1:

You handle this in one of two ways:

1. Have the component render itself in a "loading" state, or

2. Don't create the component until you have the data — e.g., move the fetch operation into its parent, and only create the component once the parent has the data to render it (which you pass as props).