infinite loop in useeffect

// Add [] at end
​
useEffect(() => {
   myFn();
}, []); // <--

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

  useEffect(() => {

     // don't know where it can be used :/
  })

  const [data, setData] = useState(false)
  const [data2, setData2] = useState('default value for first render')
  useEffect(() => {

     // if you pass some variable, than component will rerender after component mount one time and second time if this(in my case data or data2) is changed
     // if your data is object and you want to trigger this when property of object changed, clone object like this let clone = JSON.parse(JSON.stringify(data)), change it clone.prop = 2 and setData(clone).
     // if you do like this 'data.prop=2' without cloning useEffect will not be triggered, because link to data object in momory doesn't changed, even if object changed (as i understand this)
  }, [data, data2])

export default function Book({id}) { 
  const [book, bookSet] = useState(false) 

  const loadBookFromServer = useCallback(async () => {
    let response = await fetch('api/book/' + id)
    response  = await response.json() 
    bookSet(response)
  }, [id]) // every time id changed, new book will be loaded

  useEffect(() => {
    loadBookFromServer()
  }, [loadBookFromServer]) // useEffect will run once and when id changes


  if (!book) return false //first render, when useEffect did't triggered yet we will return false

  return <div>{JSON.stringify(book)}</div>  
}

jsximport { useEffect, useState } from 'react';function CountInputChanges() {  const [value, setValue] = useState('');  const [count, setCount] = useState(-1);  useEffect(() => setCount(count + 1));  const onChange = ({ target }) => setValue(target.value);  return (    <div>      <input type="text" value={value} onChange={onChange} />      <div>Number of changes: {count}</div>    </div>  )}

jsxuseEffect(() => setCount(count + 1));

jsximport { useEffect, useState } from 'react';function CountInputChanges() {  const [value, setValue] = useState('');  const [count, setCount] = useState(-1);  useEffect(() => setCount(count + 1), [value]);  const onChange = ({ target }) => setValue(target.value);  return (    <div>      <input type="text" value={value} onChange={onChange} />      <div>Number of changes: {count}</div>    </div>  );}

jsximport { useEffect, useState } from "react";function CountSecrets() {  const [secret, setSecret] = useState({ value: "", countSecrets: 0 });  useEffect(() => {    if (secret.value === 'secret') {      setSecret(s => ({...s, countSecrets: s.countSecrets + 1}));    }  }, [secret]);  const onChange = ({ target }) => {    setSecret(s => ({ ...s, value: target.value }));  };  return (    <div>      <input type="text" value={secret.value} onChange={onChange} />      <div>Number of secrets: {secret.countSecrets}</div>    </div>  );}

javascriptsetSecret(s => ({
   ...s,
   countSecrets: s.countSecrets + 1
}));

function App() {
  const [count, setCount] = useState(0); //initial value of this 
  useEffect(() => {
    setCount((count) => count + 1); //increment this Hook
  }); //no dependency array.
  return (
    <div className="App">
      <p> value of count: {count} </p>
    </div>
  );
}

useEffect(() => {
   setCount((count) => count + 1);
}, []); //empty array as second argument.

function App() {
  const [count, setCount] = useState(0);

  function logResult() {
    return 2 + 2;
  }
  useEffect(() => {
    setCount((count) => count + 1);
  }, [logResult]); //set our function as dependency
  return (
    <div className="App">
      <p> value of count: {count} </p> {/*Display the value of count*/}
    </div>
  );
}

const [count, setCount] = useState(0); //iniital value will be 0.
const myArray = ["one", "two", "three"];

useEffect(() => {
   setCount((count) => count + 1); //just like before, increment the value of Count
}, [myArray]); //passing array variable into dependencies

const [count, setCount] = useState(0);
//extract the 'current' property and assign it a value
const {
   current: myArray
} = useRef(["one", "two", "three"]);

useEffect(() => {
   setCount((count) => count + 1);
}, [myArray]); //the reference value is stable, so no infinite loop

import React, { useEffect, useState } from 'react';
export default function DataDisplayer() {  const [data, setData] = useState('');
  useEffect(() => {    const getData = async () => {      const response = await fetch(`https://swapi.dev/api/people/1/`);      const newData = await response.json();      setData(newData);    };
    getData();  }, []); //<-- This is the dependency array
  if (data) {    return <div>{data.name}</div>;  } else {    return null;  }}

import React, { useEffect, useState } from 'react';
export default function DataDisplayer(props) {  const [data, setData] = useState('');
  useEffect(() => {    const getData = async () => {      const response = await fetch(`https://swapi.dev/api/people/${props.id}/`);      const newData = await response.json();      setData(newData);    };
    getData();  }); //<-- Notice the missing dependency array
  if (data) {    return <div>{data.name}</div>;  } else {    return null;  }}

import React, { useEffect, useState } from 'react';
export default function DataDisplayer(props) {  const [data, setData] = useState('');
  useEffect(() => {    const getData = async () => {      const response = await fetch(`https://swapi.dev/api/people/${props.id}/`);      const newData = await response.json();      setData(newData);    };    getData();  }, [props.id]); //<-- This is the dependency array, with a variable
  if (data) {    return <div>{data.name}</div>;  } else {    return null;  }}

const [myMutation] = useMutation(MY_MUTATION);
const Component = () => {
   React.useEffect(() => {
      myMutation();
   }, [myMutation]);
}

const [data, setData] = useState(null);
const [login, setLogin] = useState("githubusername");
useEffect(() => {
   console.log('useEffect()')
   fetch(`https://api.github.com/users/${login}`)
      .then(res => res.json())
      .then(setData)
      .catch(console.error);
});

useEffect(() => {
   console.log('useEffect()')
   fetch(`https://api.github.com/users/${login}`)
      .then(res => res.json())
      .then(setData)
      .catch(console.error);
}, [login]);

Also, If we pass an empty array to useEffect, it’ s only executed after the first render.

useEffect(() => {
   // this is only executed once
}, [])

function deriveTotalItems(data) {
   const dataItems = [...data]
   dataItems[0].value = data.x
   dataItems[1].value = data.y
   dataItems[2].value = data.z
   return [...dataItems]
}

const {
   fetchTestData
} = useFetchHook()

const totalItems = fetchTestData.data == null ? [] : deriveTotalItems(fetchTestData.data)