please help me with this question please i have multiple useEffect and handler of services like subscriptions, listener of network state, listener of state of redux, and other things the component have more of 400 lines, but in same component, the component is located in the home of app, but return null, just handle this services, i want know if this is right, and not is a bad practice, if this is incorrect, what is correct way for handle this kind listener or services directed for all the app there are a little example:

import React, {useEffect} from 'react'

export default function handlerServices() {

useEffect(() => {
  const unsubscribe = NetInfo.addEventListener(state => {
    setStateReduxNetwork(state);
  });
},[])
useEffect(() => {
  getInitialDeepLink();
   
  return () => {
    linkingSub.remove();
  };
}, []);
.....

.....
  
}

CodePudding user response：

It's not necessarily bad practice. I've heard this called a 'utility component'. There are a couple of ways to possibly improve it.

1. Split up the component by function so it's easier to trace errors. E.g. NetworkStateComponent, LinkingComponent, etc.
2. Use an async action handling library like redux-sagas. I recommend that one if you already use redux and you need more handling than subscribe/unsubscribe.

This might also be a better question for the code review Stack Exchange.