React Hook useEffect has a missing dependency: 'getNewPins' - reactjs

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;