reactQuery_0.js

const Todo = () => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState();
  const [data, setData] = useState();

  const fetchTodo = useCallback(async () => {
    try {
      const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
      const json = await res.json();
      setData(json);
    } catch (err) {
      setError(err);
    }
    setLoading(false);
  }, []);

  useEffect(() => {
    setLoading(true);
    fetchTodo();
  }, [fetchTodo]);

  useEffect(() => {
    /* 
    eventually dispatch a redux action here
    if you need to save something in the store
    */
  }, [data]);

  if (error) {
    return `Error: ${error} `;
  }
  if (loading) {
    return "Loading...";
  }

  if (data) {
    const { title, completed } = data;
    return `${title} is ${!completed && "not "} completed`;
  }
  
  return null
};