将 Hook 传递给孙子/多个组件

Question

I'm wondering If I can pass a hook down multiple components. For example in my parent component I declare a hook and I pass the hook components into the child. And within that child I pass that hook into the grandchild and within the grandchild I set the state for the hook. I know that I can pass hooks from parent to child but unsure if I can do it for multiple components.

export const Parent = () => {
  const [data, setData] = useState("")

  return(
      <Child data={data}, setData={setData}
   )

export const Child = ({data,setData}) => 
  return(
      <GrandChild data={data}, setData={setData}
  )

export const GrandChild = ({data,setData}) => 
  setData("hi")
  return(
      <div>{data}</div>
  )

Answer 1

You can do this as many times as you want but there are better ways to do this like Redux or Context API. These tools are for preventing these kind of redundant actions.

Answer 2

This can get messy very quickly as apps grow and can cause issues finding bugs and errors. It is known as prop drilling. I would strongly recommend the following documentation on useContext