Can you provide examples of refactored code with reduced state dependencies in React hooks

Example 1: Simplifying State Management

Before:

jsx
function MyComponent() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);

  useEffect(() => {
    fetchUserDetails().then((data) => {
      setName(data.name);
      setAge(data.age);
    });
  }, []);

  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
    </div>
  );
}

After:

jsx
function MyComponent() {
  const { name, age } = useUserDetails();

  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
    </div>
  );
}

function useUserDetails() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);

  useEffect(() => {
    fetchUserDetails().then((data) => {
      setName(data.name);
      setAge(data.age);
    });
  }, []);

  return { name, age };
}

Example 2: Grouping State into a Single Hook

Before:

jsx
function MyComponent() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const [address, setAddress] = useState('');

  useEffect(() => {
    fetchUserDetails().then((data) => {
      setName(data.name);
      setAge(data.age);
      setAddress(data.address);
    });
  }, []);

  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
      <p>Address: {address}</p>
    </div>
  );
}

After:

jsx
function MyComponent() {
  const { name, age, address } = useUserDetails();

  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
      <p>Address: {address}</p>
    </div>
  );
}

function useUserDetails() {
  const [data, setData] = useState({});

  useEffect(() => {
    fetchUserDetails().then((data) => {
      setData(data);
    });
  }, []);

  return {
    name: data.name,
    age: data.age,
    address: data.address,
  };
}

Example 3: Using Context API for State Management

Before:

jsx
function MyComponent() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);

  useEffect(() => {
    fetchUserDetails().then((data) => {
      setName(data.name);
      setAge(data.age);
    });
  }, []);

  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
    </div>
  );
}

function UserContext() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);

  useEffect(() => {
    fetchUserDetails().then((data) => {
      setName(data.name);
      setAge(data.age);
    });
  }, []);

  return (
    <UserContext.Provider value={{ name, age }}>
      <MyComponent />
    </UserContext.Provider>
  );
}

After:

jsx
function MyComponent() {
  const { name, age } = useContext(UserContext);

  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
    </div>
  );
}

function UserContext() {
  const [data, setData] = useState({});

  useEffect(() => {
    fetchUserDetails().then((data) => {
      setData(data);
    });
  }, []);

  return (
    <UserContext.Provider value={{ name: data.name, age: data.age }}>
      <MyComponent />
    </UserContext.Provider>
  );
}

These examples demonstrate how to refactor code to reduce state dependencies in React Hooks by simplifying state management, grouping state into a single hook, and using the Context API for state management.