Better use of useEffect hooks as to not need use Callbacks - reactjs

Question

I have written the following React component and it's messy with the the dependencies and need for
useCallback
My question is: What about hooks am I misunderstanding to where I need to use this useCallback all the time?
const TagPicker = ({ value, defaultValue, tags, updateTags }) => {
const thisPicker = useRef(null);
const thisInput = useRef(null);
// Managing Tags
const [ selectedTags, setSelectedTags ] = useState(value || defaultValue);
const getIds = useCallback(() => {
let ids = [];
for(let x in selectedTags) {
ids.push(selectedTags[x].id);
}
return ids;
}, [ selectedTags ]);
const addTag = useCallback(tag => {
let ids = getIds();
if(!ids.includes(tag.id)) setSelectedTags([ ...selectedTags, tag ]);
}, [ selectedTags, getIds ]);
const removeTag = tag => {
let ids = getIds();
if(ids.includes(tag.id)) setSelectedTags([ ...selectedTags].filter(t => (t.id !== tag.id)));
}
// Typed text / Filtered List
const [ text, setText ] = useState('');
const [ filteredList, setFilteredList ] = useState([]);
useEffect(() => {
let ids = getIds();
if(text.length) {
let filteredTags = tags.filter(tag => (!ids.includes(tag.id)));
setOpen(true);
let list = [];
for(let x in filteredTags) {
if(filteredTags[x].title.toLowerCase().includes(text.toLowerCase())) list.push(filteredTags[x]);
}
setFilteredList(list);
} else {
setOpen(false);
setFilteredList([])
}
}, [ selectedTags, tags, text, getIds ]);
useEffect(() => {
updateTags(selectedTags);
}, [ updateTags, selectedTags ]);
// Toggling dropdown menu
const [ open, setOpen ] = useState(false);
useEffect(() => {
if(open) getCoordinates(thisPicker);
}, [ open ]);
// Handling Coordinates
const [ coords, setCoords ] = useState(null);
const getCoordinates = ({ current }) => {
if(current) {
const rect = current.getBoundingClientRect();
setCoords({
left: rect.x,
top: rect.y + window.scrollY + 40
});
}
}
useEffect(() => {
window.addEventListener('resize', () => getCoordinates(thisPicker));
return () => window.removeEventListener('resize', () => getCoordinates(thisPicker));
}, []);
// Handle Enter
const handleEnter = useCallback(e => {
if(e.keyCode === 13 && text) {
if(filteredList.length) addTag(filteredList[0]);
else addTag({
id: Math.random(),
title: text
});
setText('');
setOpen(false);
}
}, [ addTag, text, filteredList ]);
useEffect(() => {
let el = thisInput.current;
el.addEventListener('keyup', e => handleEnter(e));
return () => el.removeEventListener('keyup', e => handleEnter(e));
}, [ handleEnter ]);
return(
<div className='tag-picker' ref={thisPicker}>
<input type='text' value={text} onChange={e => setText(e.target.value)} ref={thisInput} />
<div className='selected-tags'>
{ selectedTags.map(tag => (
<Tag tag={tag} key={tag.id} removeTag={removeTag} />
)) }
</div>
{ open ?
<Portal>
<List text={text} items={filteredList} onSelect={addTag} setOpen={setOpen} coords={coords} />
</Portal>
: null }
</div>
);
};

Answer 1

There are some issues with your first useEffect. It has an extra dependency selectedTags.
If you don’t use useCallback to wrap the callback, the effect indeed depends on selectedTags. If you use useCallback, the effect only depends on the callback.
Effectively their meaning are the same. If the dependencies of useCallback change, the callback will also be recalculated. Hence the change of selectedTags triggers the changes of the callback (your getIds) and this triggers the effect: Without useCallback you put the dependencies directly inside the dependencies array of useEffect so their changes directly trigger the effect.