Access the state from custom hook in another - reactjs

Question

I have a custom hook that reads and parses JSON object from the DOM like so:
export const useConfig = () => {
const [config, setConfig] = useState<Config>();
useEffect(() => {
if (document) {
const config = document.getElementById('some-dom-element');
setConfig(JSON.parse(config?.innerHTML || '{}'));
}
}, []);
return config;
};
This object has some meaningful information for different concerns in my application.
So I created another hook that just gets the objects array from the config object:
export const useOptions = () => {
const [options, setOptions] = useState<Options>();
const config = useConfig();
useLayoutEffect(() => {
setOptions(config?.options);
}, [options]);
return options;
};
This is ok, but if I only want to read from the DOM once then I would need to call my useOptions hook at the top level of my component tree and pass the result down to so that components further down the tree can access it.
Is there way that I can change my useOptions hook so that I can call it only in the function components that need it, and not have the DOM read by useConfig on every call?
EDIT: I could probably use Recoil as a lightweight state management solution, but I was wondering if there's a better way to write these hooks so that I don't need to add additional deps

Answer 1

You are describing a custom hook that acts as a singleton.
Try using reusable library, the implementation is simple so you can use it as a recipe:
const useCounter = createStore(() => {
const [counter, setCounter] = useState(0);
return {
counter,
increment: () => setCounter(prev => prev + 1)
}
});
const Comp1 = () => {
const something = useCounter();
}
const Comp2 = () => {
const something = useCounter(); // same something
}
const App = () => (
<ReusableProvider> {/* no initialization code, stores automatically plug into the top provider */}
...
</ReusableProvider>
)
So for your use case, useConfig probably should be in the global store:
const useConfig = {...};
export default createStore(useConfig);
// Always the same config
const config = useConfig();