I want to access my state variable from one component to other

Question

I have a react query which writes the state variable- follower, and I want to access this variable in other component to find its .length can someone tell me how do I do it

const ModalFollower = ({profile}) => {
 const [follower,setFollower] = useState([])
 const {
    data: followerName,
    isLoading: followerLoading,
    isFetching: followerFetching
} = useQuery(["invitations", profile?.id], () => {
    getFollowers(profile?.id).then((response) => {
        if (response) {
            setFollower(response);
        }
    });
});
return(
{                       
 !followerLoading && (
    follower.map((e) => {
      return(<>
        <p>{e.requested_profile.Userlink}</p>
        </>}
)
}
)

I want to access the length of follower in some other component

I suggest you to use Redux, but you can also do it by passing that same state through a component prop — Crocio, Nov 25 '21 at 20:00
see this https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs — yongchang, Nov 26 '21 at 09:17
Don't use internal state, just use same query again in other component. — Shishir Arora, Nov 26 '21 at 19:37

score 0 · Answer 1 · answered Nov 28 '21 at 08:29

There is no need to copy data from react-query to local state, because react-query is a full-blown state manager for server state. As long as you use the same query key, you will get data from its cache. This is best abstracted away in custom hooks.

Please be aware that with the default values, you will get a "background refetch" if a new component mount, so you will see two network requests if you use it twice. That might look confusing at first, but it is intended, as it is not react-query's primary goal to reduce network requests, but to keep your data on the screen as up-to-date as possible. So when a new component mounts that uses a query, you'll get the stale data from the cache immediately, and then a background refetch will be done. This procedure is called stale-while-revalidate.

The best way to customize this behaviour is to set the staleTime property to tell react-query how long your resource is "valid". For that time, you will only get data from the cache if available. I've written about this topic in my blog here: React Query as a State Manager.

React Query also provides selectors, so if your second component is only interested in the length, this is what my code would look like:

const useInvitations = (profile, select) =>
  useQuery(
    ["invitations", profile?.id],
    () => getFollowers(profile?.id),
    {
        enabled: !!profile?.id
        select
    }
)

Note that I also added the enabled property because apparently, profile can be undefined and you likely wouldn't want to start fetching without that id.

Now we can call this in our main component:

const ModalFollower = ({profile}) => {

  const { data } = useInvitations(profile)
}

and data will contain the result once the promise resolves.

In another component where we only want the length, we can do:

const { data } = useInvitations(profile, invitations => invitations.length)

and data will be of type number and you will only be subscribed to length changes. This works similar to redux selectors.

I want to access my state variable from one component to other

1 Answers1