Array of hooks in React

Question

I'm starting to use hooks in React and I got stuck, when I realized I would need an array of hooks to solve my problem. But according to the Rules of Hooks

Only Call Hooks at the Top Level

I'm not allow to call hooks inside a loop (and I guess also not in map).

My custom hook subscribes to an API and adds data to the state when there is an update:

export const useTrace = (id) => {
  [trace, setTrace] = useState([])

  useEffect(() => {
    Api.getCurrentTrace(id)
      .then(currentTrace => {
        setTrace(currentTrace)
      })
  }, [id])
  
  useEffect(() => {
    Api.subscribeTraceUpdate(onUpdateTrip)
    
    return () => {
      Api.unsubscribeTraceUpdate(onUpdateTrip)
    }
  }, [])

  const onUpdateTrip = msg => {
    if (msg.id === id) {
      setTrace([msg.data].concat(trace))
    }
  }
}

In my component I have a state with an array of IDs. For each ID I would like to use the useTrace(id) hook somehow like this:

import DeckGL from '@deck.gl/react'

function TraceMap({ ids }) {
  const data = ids.map((id) => ({
    id,
    path: useTrace(id)
  }))

  const pathLayer = new PathLayer({
    id: 'path-layer',
    data,
    getPath: d => d.path
  })

  return <DeckGL
    layers={[ pathLayer ]}
  />
}

For the sake of simplicity I got ids as a property instead of having a state.

Maybe think about doing this in a more performant process. If you are using arrays to update state on any change instead do a test and compare the array data rather than your current intention. — Inspiraller
– Inspiraller, Commented Jan 8, 2021 at 14:03

Ramesh Reddy · Accepted Answer · 2021-01-08 14:07:07Z

2

Why not have a useTraces custom hook rather than useTrace. This new hook can take an array of ids instead of a single id.

export const useTraces = (ids) => {
  [traces, setTraces] = useState([]);

  useEffect(() => {
    (async () => {
      const traces = await Promise.all(
        ids.map((id) => Api.getCurrentTrace(id))
      );
      setTraces(traces);
    })();
  }, [ids]);

  // ... 
};

answered Jan 8, 2021 at 14:07

Ramesh Reddy

10.7k3 gold badges22 silver badges38 bronze badges

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

4 Comments

Kaniee Over a year ago

I'm using that hook also in an other component, where I only need the trace of an single ID. I agree, having a useTraces hook would solve that problem. The way you expressed it, would create an Api.getCurrentTraces call for every ID, when only one ID is added or removed.

Ramesh Reddy Over a year ago

You can further optimise this hook to only send requests for changed ids. Regarding the other component, you can just send an array of single id.

Kaniee Over a year ago

I hoped that there is a way to use reacts mechanism somehow, where it compares the old IDs (keys) with the new ones and only update objects where the ID (key) changed.

ggorlen Over a year ago

The problem here is what if you need to request a trace for a single ID? The public API for the hook becomes rather awkward to use (it's a good idea to show it, because this looks reasonable without the ugly calls to setTraces).

preitinger · Accepted Answer · 2024-06-28 13:31:41Z

1

Another idea might be to create a sub component and use your hook in each of them.

answered Jun 28, 2024 at 13:31

preitinger

1026 bronze badges

2 Comments

ggorlen Over a year ago

What if the parent needs the state in aggregate, though? Then the children would need to pass their data up via a callback. Not terrible, but also breaches the "when state is shared, hoist it to the parent" rule of React.

preitinger Over a year ago

If, yes, of course. But, I could not see any use by the parent in the given use case. But I totally agree, if the parent needs the state, the parent manages it. That's a basic principle in React.

Collectives™ on Stack Overflow

Array of hooks in React

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related