Should I use one or many useEffect in component?

The pattern that you need to follow depends on your useCase.

First, You might have a situation where you need to add event listener during the initial mount and clean them up at unmount and another case where a particular listener needs to be cleaned up and re added on a prop change. In such a case, using two different useEffect is better to keep the relevant logic together as well as having performance benefits

useEffect(() => {   // adding event listeners on mount here   return () => {       // cleaning up the listeners here   }}, []);useEffect(() => {   // adding listeners everytime props.x changes   return () => {       // removing the listener when props.x changes   }}, [props.x])

Second: There may be a case where you need to trigger an API call or some other side-effect when any of the state or props change amongst a set. In such a case a single useEffect with the relevant values to monitor should be a good idea

useEffect(() => {    // side effect here on change of any of props.x or stateY}, [props.x, stateY])

Third: A third case in when you need to take different actions on change of different values. In such a case, separate out relevant comparisons into different useEffects

useEffect(() => {   // some side-effect on change of props.x}, [props.x])useEffect(() => {   // another side-effect on change of stateX or stateY }, [stateX, stateY])

You should use multiple effects to separate concerns as suggested by reactjs.org https://reactjs.org/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns

It's perfectly fine to have have multiple useEffect.

Here's how one of mine setups looks like:

/* * Backend tags list have changed add the changes if needed */useEffect(() => {    setTagsList(setTagsAdded);}, [setTagsAdded]);/* * Backend files have changed add the changes if needed */useEffect(() => {    for (let i = 0; i < changedFilesMeta.length; i += 1) {        // Is the list item value changed        if (changedFilesMeta[i].id === currentEditableFile.id) {            unstable_batchedUpdates(() => {                setTags(changedFilesMeta[i].tags ? changedFilesMeta[i].tags : []);            });        }    }}, [changedFilesMeta]);/* * Reset when user select new files using the filepicker */useEffect(() => {    if (setNewFiles.length > 0) {        unstable_batchedUpdates(() => {            setCurrentFile(null);            setDescription('');            setTitle('');            setTags([]);        });    }}, [setNewFiles]);/* * User selecet to edit a file, change to that file */useEffect(() => {    // When user select a file to edit it    if (currentEditableFile && currentEditableFile !== theCurrentFile) {        setCurrentFile(currentEditableFile);        unstable_batchedUpdates(() => {            setDescription(currentEditableFile.description);            setTitle(currentEditableFile.title);            setTags(currentEditableFile.tags);        });    }}, [currentEditableFile]);