Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

import { useState, useEffect } from 'react';

// Component tree: App → UserCard → Avatar
function Avatar({ src, alt }) {
  return <img src={src} alt={alt} style={{ borderRadius: '50%', width: 64 }} />;
}

function UserCard({ user }) {
  // Rendered whenever App re-renders (or its own state changes)
  return (
    <div className="user-card">
      <Avatar src={user.avatar} alt={user.name} />
      <h3>{user.name}</h3>
      <p>{user.email}</p>
    </div>
  );
}

function App() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

// Side effects go in useEffect, NOT in the render body
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then(r => r.json())
      .then(data => {
        setUser({ name: data.name, email: data.email, avatar: '' });
        setLoading(false);
      });
  }, []); // empty array = run once after first render

if (loading) return <p>Loading...</p>;
  return <UserCard user={user} />;
}

export default App;