Using React context in a component

Question

Say I create a simple React context to check if I am connected

import NetInfo, { NetInfoState } from '@react-native-community/netinfo';
import Constants, { AppOwnership } from 'expo-constants';
import React, { PropsWithChildren, createContext, useContext, useEffect, useState } from 'react';
import { Platform } from 'react-native';

const ConnectionContext = createContext<boolean>(undefined);

export function ConnectionProvider({ children }: PropsWithChildren<any>): JSX.Element {
  const [connected, setConnected] = useState(false);

  function handleConnectionChange(netInfo: NetInfoState) {
    setConnected(
      (Platform.OS === 'ios' && Constants.appOwnership === AppOwnership.Expo) ||
        (netInfo.isConnected && (netInfo.isInternetReachable ?? true))
    );
  }

  useEffect(() => {
    const subscriptionCancel = NetInfo.addEventListener(handleConnectionChange);
    return () => subscriptionCancel();
  }, []);

  return <ConnectionContext.Provider value={connected}>{children}</ConnectionContext.Provider>;
}

export function useConnection() {
  return useContext(ConnectionContext);
}

I was wondering if I want to use it in my existing component XYZ, is there a less roundabout way of doing it than the following

From:

export function XYZ() {
   ...xyz code...
}

to:

export function XYZ() {
  return (
    <ConnectionContextProvider>
      <RealXyz>
    </ConnectionContextProvider>
  );
}
function RealXyz() {
  const connected = useConnection();
  ...xyz code...
}

Looking forward the answers to this... but I guess if you need context, it is for globalish state, otherwise you can just useState in XYZ right? So usually I would assume that the provider will end up wrapping a farther ancestor? — Pandaiolo
– Pandaiolo, Commented Jul 19, 2021 at 21:51
normally I would, but I needed it just for this one spot. Because context updates causes rerenders — Archimedes Trajano
– Archimedes Trajano, Commented Jul 19, 2021 at 21:56
No, there is no less roundabout way, although you can implement it as HOC it's not recommended since you already working with function components. — Dennis Vash
– Dennis Vash, Commented Jul 19, 2021 at 22:29

Ryan Wheale · Accepted Answer · 2021-07-19 23:32:17Z

1

I don't think context is really necessary for this since a connection is more of a singleton type of thing. The following code should be in its own file, and you can import this hook anywhere in your app.

let _isConnected = false;

export const useConnection = () => {
  const [isConnected, setConnected] = useState(_isConnected);

  useEffect(() => {
    function handleConnectionChange(netInfo: NetInfoState) {
      _isConnected =  (Platform.OS === 'ios' && Constants.appOwnership === AppOwnership.Expo) ||
        (netInfo.isConnected && (netInfo.isInternetReachable ?? true))
      
      setConnected(_isConnected);
    }
    
    const subscriptionCancel = NetInfo.addEventListener(handleConnectionChange);

    return () => subscriptionCancel();
  }, []);

  return isConnected;
}

Explanation:

Let's say you have two components which use this hook. When your app first renders, only ComponentA is mounted. Some time later the connection state changes to true. Then some time later ComponentB is mounted. We want ComponentB to know that the connection state is currently true, which is why we use the singleton pattern (eg. private global variable _isConnected). It doesn't matter much that there are multiple event listeners as those are cheap and get removed when the component is unmounted.

edited Jul 19, 2021 at 23:32

answered Jul 19, 2021 at 23:05

Ryan Wheale

28.7k11 gold badges87 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Archimedes Trajano Over a year ago

You're right, it's should custom hook totally forgot about that. Also... why not useRef for theisBound? (I am presuming you're using that for checking if the component is mounted. Also why do you need a _isConnected?

Ryan Wheale Over a year ago

useRef wouldn't work because you'd get a different ref every time you used this hook... hence the singleton pattern.

Archimedes Trajano Over a year ago

I was thinking about the _isBound shouldn't that be isMounted as a ref? But I see what you mean by the "singleton" thingy. However, I think it's more of an efficiency thing because if we had multiple scoped copies of the ref it should still be fine.

Ryan Wheale Over a year ago

Oh, crap. I was updating my answer to include an explanation and realized that it didn't work the way I had it. I've updated the code and removed the _isBound stuff as it added unnecessary complexity and actually made it not work.

Ryan Wheale Over a year ago

setState (or setConnection) would never get called on an unmounted component because the event listener is removed whenever the component is unmounted. The problem with my initial attempt is that only the first component would get re-rendered whenever the connection state changed.

|

mstrk · Accepted Answer · 2021-07-19 22:44:17Z

Context is handy if you have data that needs to be shared across multiple components and you do not want to pass it down the tree by props.

from the docs:

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

In your example I would use useState, but to give you a good idea where you could opt for context check the following snippet:

...

function ABC() {
  const connected = useConnection();
  ...abc code...
}

function ABCParent() {
  return <ABC />
}

...

function XYZ() {
  const connected = useConnection();
  ...xyz code...
}

function XYZParent() {
  return <XYZ />
}

...

function App() {
 return (
  <ConnectionContextProvider>
    <ABCParent />
    <XYZParent />
  </ConnectionContextProvider>
 )
}

The two components that make use of the context are "deep" in the tree and in separate branches. The example is a bit simple and you could easily pass the data that you need through props and still have a maintainable code base.

But ultimately if you feel that your data model can be "global" and you have enough dependents in separate branches or in the same branch in multiple levels go for context API.

Some data model examples where I find the use of context API useful are theme, app settings, routing and translations.

One thing to note: The components that depend on a context will be less reusable (This is more relevant across projects) and sometimes you can opt for composition instead of using the context API. Check the before you use context section of the docs for more information about this.

Collectives™ on Stack Overflow

Using React context in a component

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related