title: socket.io-client emmitting event multiple times in react native
body: <p>I am new to using socket.io with react native.I am able to connect the socket.io instance with my node.js backend but the socket.io client is emmitting events multiple times.The app has grown quite complex so,I am also trying to explain what I did.</p>
  <p>Main.js (User is redirected here from App.js)</p>
  <p>I am using a library called react-native-tab-view and I used useContext to pass the socket instance.I have checked that the hook is working properly.</p>
  <pre><code>export const SocketObj = createContext()
  const Main = ({ route }) =&gt; {
  
      let [socket, setSocket] = useState(undefined)
  
      const routesLength = useNavigationState(state =&gt; state.routes.length);
  
      const connect = async () =&gt; {
          if (routesLength == 1) {
              setSocket(io(&quot;http://192.168.43.115:8000&quot;, {
                  transports: ['websocket'],
                  query: {
                      token: await AsyncStorage.getItem(&quot;token&quot;)
                  }
              }))
          } else {
              const { socketInstanse } = route.params
              setSocket(socketInstanse)
          }
      }
      connect()
  
      const layout = useWindowDimensions();
  
      const [index, setIndex] = useState(0);
  
      const [routes] = useState([
          { key: 'first', title: 'CHAT' },
          { key: 'second', title: 'PEOPLE' },
      ]);
  
  
      const renderScene = SceneMap({
          first: SplashScreen,
          second: PeopleScreen,
      });
  
      return (
          &lt;SocketObj.Provider value={socket} &gt;
              &lt;TabView
                  navigationState={{ index, routes }}
                  renderScene={renderScene}
                  onIndexChange={(number) =&gt; {
                      setIndex(number)
                  }}
                  initialLayout={{ width: layout.width }}
              /&gt;
          &lt;/SocketObj.Provider&gt;
      );
  
  }
  
  export default Main;
  </code></pre>
  <p>PeopleScreen.js</p>
  <p>The user is directed here from Main.js. I have used the context api here to get the socket instance.
  As you can see , i am using an event to log &quot;Connected&quot; to the console when connected but it is emitting multiple times.I don't want to emit it multiple times.Help me</p>
  <pre><code>import { SocketObj } from &quot;./Main&quot;
  
  const PeopleScreen = ({ route, navigation }) =&gt; {
  
      let socket = useContext(SocketObj)
  
      socket.on(&quot;connect&quot;, () =&gt; console.log(&quot;Connect&quot;))
  
      const [peopleList, setPeople] = useState([])
  
  
      useEffect(
          () =&gt; {
              const fetchData = async () =&gt; {
                  try {
                      const response = await API.get('get/users', {
                          headers: {
                              'Content-Type': 'application/json',
                              &quot;auth-token&quot;: await AsyncStorage.getItem(&quot;token&quot;)
                          }
                      })
                      setPeople(response.data)
                  } catch (err) {
                      console.log(err.response)
                  }
              }
              fetchData()
          }, []
      )
  
  
  
  
      return (
          &lt;View style={{
              flex: 1,
              backgroundColor: '#fff',
              width: '100%',
              height: '100%'
          }} &gt;
              &lt;View&gt;
                  {
                      peopleList.map(
                          (i, key) =&gt; {
                              return (
                                  &lt;View style={{
                                      display: 'flex',
                                      flexDirection: 'row',
                                      top: 40,
                                      marginVertical: 5,
                                      marginBottom: 10,
                                      backgroundColor: 'grey',
                                      height: 50
  
                                  }}
                                      key={key} &gt;
                                      &lt;Text style={{
                                          maxWidth: &quot;50%&quot;
                                      }} &gt;{i.firstName + ' ' + i.email}&lt;/Text&gt;
                                      &lt;TouchableOpacity
                                          onPress={
                                              async () =&gt; {
                                                  console.log(socket)
                                                  API.post('post/add-friend', {
                                                      friend_email: i.email
                                                  }, {
                                                      headers: {
                                                          &quot;auth-token&quot;: await AsyncStorage.getItem(&quot;token&quot;)
                                                      }
                                                  }).then(
                                                      data =&gt; console.log(data.data)
                                                  )
                                              }
                                          }
                                          style={{
  
                                              backgroundColor: 'rgb(255, 105, 105)',
                                              width: 130,
                                              justifyContent: 'center',
                                              alignItems: 'center',
                                              left: 150
                                          }}
                                          activeOpacity={0.6} &gt;
                                          &lt;Text style={{
                                              color: 'white',
                                          }} &gt;Add Friend&lt;/Text&gt;
                                      &lt;/TouchableOpacity&gt;
                                  &lt;/View&gt;
                              )
                          }
                      )
                  }
              &lt;/View&gt;
          &lt;/View &gt;
      )
  }
  
  export default PeopleScreen
  </code></pre>
  <p>I have ignored unnecessary imports.</p>