How to debug inside useCallback and useEffect React?

Asked Sep 08 '21 at 18:33

Active Sep 11 '21 at 20:41

Viewed 22 times

I need to console.log response or data values inside use callback but I can't, same whenever I debug with dev tools I can't read the data. I need to understand why is not possible to read the data and to debug with devtools.

     const List = (props) => {
     const [list, setList] = useState([]);

     const fetch = useCallback(async () => {
      try {
      const response = await fetch(
      "https://react-movie-e18ec-default-rtdb.firebaseio.com/movies.json"
        );
      if (!response.ok) {
      throw new Error("Something went wrong!");
      } 
     console.log("response", response);

    const data = await response.json();
    setList(data);
    console.log("data", data);
    } catch (error) {}
    }, []);

   useEffect(() => {
   fetch();
    }, [fetch]);

 const items = list.map((item) => <Item key={item.id} item={item} />);
  console.log("items", list);
return (
  <Fragment>
  <div className={classes.list}> {items}</div>
</Fragment>
 );
 };
 export default List;

edited Sep 11 '21 at 20:41

skyboyer

22,209
7
57
64

asked Sep 08 '21 at 18:33

RihabBerry

alternatively, you can look at the network tab of your browser's dev tools. – tladuke Sep 08 '21 at 18:36
What happens when you do? What is the actual result? – Technoh Sep 08 '21 at 18:36
@tladuke I did but when i hover on the data that I need to read nothing shown. – RihabBerry Sep 08 '21 at 18:38
nothing printed i can not see anything @Technoh – RihabBerry Sep 08 '21 at 18:39
Are you sure that `response.ok` is truthish? Throwing the error would skip the `console.log` calls. – Technoh Sep 08 '21 at 18:43
React state updates are asynchronously processed, console logging state right after an enqueued state update will only ever log the state from the current render cycle of the callback closure. – Drew Reese Sep 08 '21 at 18:44

How to debug inside useCallback and useEffect React?

0 Answers0