3. Internet connection handling for react native app using hooks

Today, Let’s talk about react native with hooks.

So, in my last post, I wrote about react hooks and after that react native developers eagerly waiting for the support of hooks in mobile app too.

Last month react native v0.59 arrived with support of hooks. If you want to see changelog you can check React native hooks changelog.

Hooks in React Native works as same as in Reactjs. So there is no point of explaining the same thing I explained earlier. If you want to check, how react hooks works you can check my post The rise to functional components with React hooks.

Today, we are going to create our custom hook that is useful to check internet connection changes throughout the app.

Why?

Nowadays, almost every mobile app uses internet connection and there is always a case that needs to handle when there is no internet connection.

Okay! we are going to create one functional component that indicates the status of the network connection. And yes we are also learning how to create your own custom hook.

Let’s begin!

A custom hook is javascript function whose name starts with use and that may call other Hooks.

function useNetInfo() {
  // useState hook for setting netInfo
  const [netInfo, setNetInfo] = useState(false)

  // It calls when connection changes
  onChange = (newState) => {
    setNetInfo(newState)
  }

  // useEffect hook calls only once like componentDidMount()
  useEffect(() => {
    // To get current network connection status
    NetInfo.isConnected.fetch().then((connectionInfo) => {
      setNetInfo(connectionInfo)
    })
    // Whenever connection status changes below event fires
    NetInfo.isConnected.addEventListener('connectionChange', onChange)

    // Our event cleanup function
    return () => {
      NetInfo.isConnected.removeEventListener('connectionChange', onChange)
    }
  }, [])
  
  // returns current network connection status 
  return netInfo
}

So, we have declared our first custom hook.

As you noticed, there is nothing new added. It’s like a normal javascript function that can have params and returns value.

function useNetInfo() {
  const [netInfo, setNetInfo] = useState(false)
}

Here, you can see that we are using useState hook to set netInfo value. After that, we need to register an event handler for connection change. So, whenever connection changes our custom component is going to update with current connection status.

onChange = (newState) => {
  setNetInfo(newState)
}

useEffect(() => {
  NetInfo.isConnected.fetch().then((connectionInfo) => {
    setNetInfo(connectionInfo)
  })
  NetInfo.isConnected.addEventListener('connectionChange', onChange)

   return () => {
    NetInfo.isConnected.removeEventListener('connectionChange', onChange)
  }
}, [])

We added useEffect hook here for checking the connection to know the device is online or not. Here, I registered a connection change event and de-registered it by returning a function.

Once an event is registered, your onChange function is going to be call on every connection change event and setting netInfo state with current connection status.

function useNetInfo() {
  // .... custom hook code

  return netInfo;
}

Now, our custom hook returns netInfo that is used to check for connection status.

Sidenote: In our example, we have used NetInfo that is deprecated now and react-native official docs informed us to use it from @react-native-community/react-native-netinfo

How to use custom hook?

function CheckConnection(){
  const netInfo = useNetInfo();
  return(
    // this is just for an example you can design this as per your need
    <Text>{netInfo ? 'Online' : 'Offline'}</Text> 
  )
}

Above, we created one functional component CheckConnection which is used to indicate network status.

Sidenote: Any hooks, either it is Default hooks or Custom hooks, they must be used inside a react function components or inside a custom hooks. So, custom hooks can be used within custom hooks.

Is it necessary to start your custom hook name with use?

Yes, this is important otherwise react can’t be able to identify a violation of rules of Hooks

So, today we learned about custom hooks in react native, some of the rules need to be followed while using custom hooks, using function component and default hook in react native, connection handling component using hooks, etc.

Hope this is helpful 🙏 for someone

Nishith