react-live-coding.ts

react-live-coding.ts

import { useState, useEffect } from "react";

const useUserData = (userId) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      const data = await response.json();
      setUser(data);
    };

    fetchUser();
  }, [userId]);

  return user;
};

export const UserProfile = ({ userId }) => {
  const user = useUserData(userId);
  const [count, setCount] = useState(0);

  const permissionOptions = {
    isAdmin: false,
    updatesAllowed: true,
    notification: true,
  };

  const handleUpdate = () => {
    // Simulating an expensive calculation or update
    setCount(count + 1);
    console.log("Profile updated for:", user.name);
  };

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
      <button onClick={handleUpdate}>Refresh Local State: {count}</button>
      <CustomComponent
        userName={user.name}
        permissionOptions={permissionOptions}
      />
    </div>
  );
};