Discussion on: Fetching data with React Hooks

yes. console.log() print 4 times. Now below is detailed problem I had before doing comment on your post. see the useEffect.

first of all I wanted was to assign the fetched values to my state so that I can use it in my JSX of react component.
So I written following code :

const [values, setValues] = useState({
    name: "",
    description: "",
    error: false,
    loading: false,
    success: false,
  });

const preload = (courseName) => {
    courseName = courseName.replace(/%20/g, " ");
    getCourseByName({ courseName }).then((data) => {
      if (data.error) {
        setValues({ ...values, error: data.error });
      } else {
        console.log("data retrieved : ", data);
        setValues({
          ...values,
          name: data.name,
          description: data.description,
          success: true,
        });
        console.log(values); // use this values in react component
      }
    });
  };

  useEffect(() => {
    preload(match.params.courseName);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []); // here I kept the brackets empty first.

So I wanted to assign the fetched data to my JSX elements in component. So I thought why not to check if it is printing correctly. here is what happened:
console.log("data retrieved : ", data); prints exact retrieved data. but console.log(values); this prints all empty values. So I thought the setValues() didn't work out.

After that I started to find out why my retrieved data is not assigned to setValues(). So I saw your post and I entered [values.success] in useEffect().

useEffect(() => {
    preload(match.params.courseName);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [values.success]);

This correctly assigns fetched data into setValues and prints console.log(values); But problem here values gets printed two times. First with empty values and second with assigned values. This is mainly because useEffect method runs twice. first when DOM is mounted and second when value of success changed after fetching data from API. Hence I also didn't want this.

So I thought, lets keep this printing values aside. I did not print the
console.log(values) as I knew that it will be empty. I also didn't write console.log("data retrieved : ", data); as I knew that fetching works fine. What I did was, I kept the [ ] in useEffect() empty as before. I fetched data and assigned data values using setValues.

const [values, setValues] = useState({
    name: "",
    description: "",
    error: false,
    loading: false,
    success: false,
  });

const preload = (courseName) => {
    courseName = courseName.replace(/%20/g, " ");
    getCourseByName({ courseName }).then((data) => {
      if (data.error) {
        setValues({ ...values, error: data.error });
      } else {
        setValues({
          ...values,
          name: data.name,
          description: data.description,
          success: true,
        });
      }
    });
  };

  useEffect(() => {
    preload(match.params.courseName);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

After this, I directly used the values (values.name, value.description, value.loading, value.success) in my JSX and it worked fine and that was my end goal.

But I couldn't find solution to one question - why does console.log(values) prints empty values but in actuality the setValues works fine and assigns values and you can use those in your JSX.

PS: I know this comment has new level of verbosity ;)