React how to slow down reactivity when rendering an object?

Question

React

I ran into a rendering issue with custom photos.
I have 2 situations that show the problem.
Screenshot 1. an array

comes from the back with such values

email:"",
name:"",
avatar:boolean

I make a map method and, based on the avatar, I make a request to get the user's avatar from the back.

{user.avatar === true ?(
                   <img
                   className="card-img-top"
                   src={`http://localhost:8080/user/photo/${user._id}?`}
                   alt={user.name}
                   style={{ height: "50px", width: "50px" }}
                   
                 />    
                  ):(      
                  <img
                  className="card-img-top"
                  src={`${DefaultProfile}`}
                  style={{ height: "50px", width: "50px" }}
                />          
                  )}

All this fits into such a ternary expression. And it works like clockwork.
Screen 2.

Here, I get the opposite. Object user has almost the same properties.

//выдержка из кода
  const { redirectToSignin, user } = this.state;
   return (
 {user.avatar === true ? (
                <>
                 <img
                   className="card-img-top"
                   src={`http://localhost:8080/user/photo/${user._id}?`}
                   alt={user.name}
                   style={{ height: "10em", width: "10em" }}
                   />
                </>
              ):(
               ""
              )}
{user.avatar === false ? (
                <>
                 <img
                   className="card-img-top"
                   src={DefaultProfile}
                   alt={user.name}
                   style={{ height: "10em", width: "10em" }}
                   />
                </>
              ):(
               ""
              )}

The problem is that it renders the default avatar first. Which I wrote in the code, in case the user does not have a photo. And then, it renders its normal avatar. As far as I understand, the problem is that React works with State asynchronously. And with the map method, synchronously.

How to solve this problem? In addition to translating everything into an array.

PS I made a loader, but it still looks like epileptic hell.

Answer 1

something like this

<img src={`http://localhost:8080/user/photo/${user._id}?`} onerror= {DefaultProfile} alt={user.name}/>

Answer 2

The thing is that when the page is loaded, the back request has not yet been processed, so your state is empty. Therefore, you will always have to show first. For good, when the image is rendered, the state should already be ready. If the response from the server comes quickly, then maybe it's better to have a 1-2 second delay instead of what you have now.
And your conditional expression is very strange, you check twice for the same thing. In short, simpler and clearer. can be moved to a separate component. And learn Redux and Context will be useful.