Reactjs – React/Typescript: Is it possible to use data that is fetched from a nested child component in the parent component?

If a component needs some data, then it either fetch the data itself, or be passed that data from the parent (via passed props, or context).

So in your case, React-component-1 should fetch the data and provide it to React-component-4.

NOTE: Don’t do this

You can pass it back up with functions:

function ComponentA() {
  const [str, setStr] = useState<string>('')
  return <ComponentB onChange={setStr} />
}

function ComponentB({onChange}: { onChange: (str: string) => void }) {
  useEffect(() => {
    fetch(someUrlHere)
      .then(res => res.json())
      .then(data => onChange(data))
  }, [])

  return <></>
}

But this is a bad idea. It’s confusing and complicated. And as your app grows, tracking what data is coming from where will be very hard.

So the general rule is to put your state at the first common ancestor of the components that need that state. And then put your data fetching right along side it to populate that state.