React Hook useEffect 缺少依赖项：'getNewPins'

Question

I have a small project, to fetch images from Unsplash, even ı check many times, I still have one problem with my code, I am running my code, but it always gives this error, but I don't get it. Any idea will be appreciated.

App.js:

function App() {
    const [pins, setNewPins] = useState([])
    const getImages = (term) => {
        return unsplash.get ("https://api.unsplash.com/search" , {
            params: {
              query: term
            }
        });
    };
    const onSearchSubmit = (term) => {
        getImages(term).then((res) => {
            let results = res.data.results;
            let newPins = [
              ...results,
              ...pins
            ]
            newPins.sort(function(a,b) {
                return 0.5 - Math.random();
            });
            setNewPins(newPins);
        });
    };
    const getNewPins = () => {
        let promises = [];
        let pinData = [];
        let pins = ['Istanbul','cats','sky','lake','nature']
        pins.forEach((pinTerm) => {
            promises.push (
              getImages(pinTerm).then((res) => {
                  let results = res.data.results;
                  pinData = pinData.concat(results);

                  pinData.sort(function(a,b) {
                      return 0.5 - Math.random();
                  });
              });
            );
        });
        Promise.all(promises).then(()=> {
            setNewPins(pinData);
        });
};
useEffect(() => {
    getNewPins();
}, []);
return (
    <div className="app">
        <Header  onSubmit={onSearchSubmit}/>
            <Mainboard  pins={pins}/>
    </div>
)}
export default App;

Answer 1

The getNewPins method is re-created everytime in your app after each render and you're using it inside an useEffect which is saying to place it inside the [] array. If you do so, it will later say to wrap getNewPins inside useCallback to prevent re-renders. Instead of that you can just place the whole function inside your useEffect like so (since it's a one time operation that's done initially):-

function App() {
const [pins, setNewPins] = useState([])
const getImages = (term) => {
return unsplash.get ("https://api.unsplash.com/search" , {
params: {
  query: term
}});
};
const onSearchSubmit = (term) => {
 getImages(term).then((res) => {
 let results = res.data.results;
 let newPins = [
   ...results,
   ...pins,
 ]
 newPins.sort(function(a,b){
  return 0.5 - Math.random();
 });
 setNewPins(newPins);
});
};

  useEffect(() => {
   const getNewPins = () => {
 let promises = [];
 let pinData = [];
  let pins = ['Istanbul','cats','sky','lake','nature']
  pins.forEach((pinTerm) => {
  promises.push (
  getImages(pinTerm).then((res) => {
  let results = res.data.results;
  pinData = pinData.concat(results);

  pinData.sort(function(a,b){
    return 0.5 - Math.random();
  });
 })
 );
});
Promise.all(promises).then(()=> {
 setNewPins(pinData);
 });
 };
  getNewPins();
 }, []);
return (
<div className="app">
  <Header  onSubmit={onSearchSubmit}/>
  <Mainboard  pins={pins}/>
</div>
);
}
export default App;