React

react hooks render twice demo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.25.0/axios.min.js"></script>
<div id="app"></div>

React

const { PureComponent, useState, useEffect, useCallback  } = React;

// TODO: fetch user from github by "userId" and display information about him
// TODO2: if "userId" changes, fetch new user for a given id

// api: GET https://api.github.com/users/${userId}

// response model
// const user = {
//         avatar_url: '",
//         name: "",
//         location: "",
//         bio: "",
//         public_repos: "",
//       }


const User = ({ userId }) => {  
  return (
    <div>
      <img src={userData.avatar_url} width="200px" alt="avatar" />
      <h2>{userData.name}</h2>
      <p>{userData.location}</p>
      <p>{userData.bio}</p>
      <p>{userData.public_repos}</p>
    </div>
  );
};

const Root = () => <User userId="Ambitious156288" />;

ReactDOM.render(<Root />, document.getElementById("app"))