如何使用一个自定义钩子在两个远程组件之间共享数据

Question

I have two components which are located in different position in the hierarchy. One component has data which should be used in another component. I was trying to achieve this with custom hook. When I used in components I'm getting false, I want it to be true because I set it to true from component 1 so component 2 should get true. I don't know little bit confused on custom hooks.

Custom Hook

export const useShareData = () => {
  const [data, setData] = useState<boolean>(false)

  const setValue = (value: boolean) => {
    setData(value)
  }
  return [data, setValue]
}

Component 1

const [data, setData] = useShareData()
const dataToBeShared = true
useEffect(()=>{
   setData(dataToBeShared)
},[dataToBeShared])

Component 2

const [data] = useShareData()
console.log(data)

In component 2 the value is always false.

Answer 1

Creating a custom hook doesn't let data be shared, it just lets code be shared. While component 1 is rendering, if it calls const [data, setData] = useState<boolean>(false) , it creates a state variable for component 1. This is the case whether it's written inline or extracted to a helper function (aka, a custom hook). Similarly, when component 2 calls useState, it creates state for component 2. The two states are not shared.

The standard approach for your issue is to lift state up to whatever component is the common ancestor of these two components, and then pass it down. If the common ancestor is nearby, props can be used; if it's far away, context becomes a more attractive option.