const Consumer2 = () => {
const mode = useDarkMode();
return

`

#### imperatively read hook state for non-react code
`javascript
import { useState } from 'react';
import { singletonHook } from 'react-singleton-hook';

const initDarkMode = false;
let currentMode = initDarkMode;
let globalSetMode = () => { throw new Error(you must useDarkMode before setting its state); };

export const useDarkMode = singletonHook(initDarkMode, () => {
const [mode, setMode] = useState(initDarkMode);
globalSetMode = setMode;
currentMode = mode;
return mode;
});

export const setDarkMode = mode => globalSetMode(mode);
export const getDarkMode = () => currentMode;
`

#### use react-redux (or any other context) inside singletonHook
To use react-redux or any other context-based functionality, singleton hooks should be mounted under provider in your app.
To do that, import SingletonHooksContainer from react-singleton-hook and mount anywhere in you app.
SingletonHooksContainer must be rendered ealier then any component using singleton hook!
By default you are not required to deal with a SingletonHooksContainer, we run this component internally in separate react app.


`javascript
/ file:src/services/currentUser.js /
import { singletonHook } from 'react-singleton-hook';
import { useSelector } from 'react-redux';

const init = { loading: true };
const useCurrentUserImpl = () => {
const session = useSelector(state => state.session);
if (session.loading) return init;
return session.user;
};

export const useCurrentUser = singletonHook(init, useCurrentUserImpl);

/ file:src/App.js /

import React from 'react';
import ReactDOM from 'react-dom';
import { SingletonHooksContainer } from 'react-singleton-hook';
import { Provider } from 'react-redux';
import store from 'src/store';
import App from 'src/views';

const app = (

<>




);

ReactDOM.render(app, document.getElementById('root'));
`

#### top-level components updated before low-level components

`javascript
/ file:src/services/session.js /

import { useEffect, useState } from 'react';
import { singletonHook } from 'react-singleton-hook';

const initState = { loading: true };
let setSessionGlobal = () => { throw new Error('you must useSession before login'); };

const useSessionImpl = () => {
const [session, setSession] = useState(initState);
setSessionGlobal = setSession;
useEffect(() => { setSession({ loggedIn: false }); }, []);
return session;
};

export const useSession = singletonHook(initState, useSessionImpl);

export const login = (name, pass) => {
setSessionGlobal({ loggedIn: true, user: { name: 'test' } });
};

/ file:src/index.js /
import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import { login, useSession } from 'src/services/session';

const LoggedInView = () => {
const session = useSession();
console.log(LoggerInView rendered with ${JSON.stringify(session)});
return null;
};

const LoggedOutView = () => {
const session = useSession();
console.log(LoggedOutView rendered with ${JSON.stringify(session)});
return null;
};

const WaitingForSessionView = () => {
const session = useSession();
console.log(WaitingForSessionView rendered with ${JSON.stringify(session)});
return null;
};

const MainComponent = () => {
const session = useSession();

useEffect(() => {
setTimeout(() => { login('testuser'); }, 2000);
}, []);

console.log(MainComponent rendered with ${JSON.stringify(session)});

if (session.loading) return ;
if (session.loggedIn) return ;
return ;
};


ReactDOM.render(, document.getElementById('root'));

/ console.log /
/*

MainComponent rendered with {"loading":true}
WaitingForSessionView rendered with {"loading":true}
MainComponent rendered with {"loggedIn":false}
LoggedOutView rendered with {"loggedIn":false}
MainComponent rendered with {"loggedIn":true,"user":{"name":"test"}}
LoggerInView rendered with {"loggedIn":true,"user":{"name":"test"}}

*/
`

$3

As of version 3.0, singletonHook accepts a callback that calculates initial state instead of predefined initial state.
This callback is called once and only when the value is required.
You can use it to calculate expensive initial values or
avoid an extra render (and a state flickering)
when initial state changes before any component consumes the hook:

#### example: subscribe components to pre-existing get/set data module

`javascript
/ file:src/services/darkMode.js /

import { useState } from 'react';
import { singletonHook } from 'react-singleton-hook';

let isDarkMode = false; // the state of the module
let updateSubscribers = (mode) => {}; //update subscribers callback - do nothing by default

// pre-existing functions to manipulate the state
export const getDarkMode = () => isDarkMode;

export const setDarkMode = (newMode) => {
isDarkMode = newMode;
updateSubscribers(isDarkMode); // call updateSubscribers when setting new state
};

// new function - custom hook for components to subscribe.
// using getDarkMode as an init callback to get most relevant state
export const useDarkMode = singletonHook(getDarkMode, () => {
const [mode, setMode] = useState(getDarkMode);
updateSubscribers = setMode; // subscribing for further updates
return mode;
});

/ file:src/index.js /

// you can call setter and getter any time
setDarkMode(true);
setInterval(() => setDarkMode(!getDarkMode()), 2000);

const App = () => {
// component will be updated on darkMode change
// on first render "mode" is set to the current value getDarkMode returns
const mode = useDarkMode();
return