I have an app in React Native that uses many context. I want to access one of them within a non rendering function e.g. :
const DataContext = React.createContext();
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
// ...
systemState: {},
// ...
};
}
componentDidMount() {
const systemState = offlineSystemState();
this.setState(systemState);
}
// ...
render() {
return (
<DataContext.Provider value={this.state}>
<CustomComponent />
</DataContext.Provider>
);
}
}
// OfflineSystemState component wants access to the DataContext,
// but impossible because it is not being rendered.
// Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
const offlineSystemState = () => {
const context = useContext(DataContext);
const systemState = processData(context.data);
return systemState;
};
Is it possible to do this ? If not, is there a store that can do it (Redux, Mobx, ...) ?
Thanks.