Claude Code worflow

The Claude code task cycle 1. Gater context Reads files, explore projec structure, code base 2. Plan Break the task in to steps 3. Execute Implements Edits files, run test, execute commands 4. Verify Output is correct- runs test, reviews diffs

Tanstack query vs React Fetch -Axios

import { useQuery } from "@tanstack/react-query";

function Users() {
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ["users"],
    queryFn: async () => {
      const res = await fetch("/api/users");
      if (!res.ok) {
        throw new Error("Failed to fetch users");
      }
      return res.json();
    },
  });

  if (isLoading) return <p>Loading...</p>;

  if (isError) {
    return <p>{error.message}</p>;
  }

  return (
    <ul>
      {data.map((user: any) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

//Plain fetch 

useEffect(() => {
  fetch("/api/users")
    .then(...)
}, []);

import { useState, useEffect } from 'react';
function UserList() {
  const [users, setUsers] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  useEffect(() => {
    setIsLoading(true);
    fetch('https://api.example.com/users')
      .then((res) => {
        if (!res.ok) throw new Error('Failed to fetch');
        return res.json();
      })
      .then((data) => {
        setUsers(data);
        setIsLoading(false);
      })
      .catch((err) => {
        setError(err.message);
        setIsLoading(false);
      });
  }, []);
  if (isLoading) return 
Loading...
;
  if (error) return 
Error: {error}
;
  return (
    

      {users.map((user) => (
        
{user.name}
      ))}
    
  );
}

Reactjs-toolkit react-redux vs ContextAPI