Super simple state management in a WordPress app

App.js

/**
 * Internal dependencies
 */
import ChildComponent from './ChildComponent';
import StoreProvider from './utils/store';

const App = () => (
    <StoreProvider>
        <ChildComponent />
    </StoreProvider>
);

export default App;

ChildComponent.js

/**
 * WordPress dependencies
 */
import { TextControl } from '@wordpress/components';

/**
 * Internal dependencies
 */
import useSettings from './hooks/useSettings';

const ChildComponent = () => {
    const { text, setText } = useSettings();

    return <TextControl value={text} onChange={newText => setText(newText)} />;
};

export default ChildComponent;

store.js

// utils/store.js

/**
 * WordPress dependencies
 */
import { createContext, useState } from '@wordpress/element';

export const StoreContext = createContext(null);

export default ({ children }) => {
    const [text, setText] = useState('');

    const store = {
        text,
        setText,
    };

    return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
};

useSettings.js

// hooks/useSettings.js

/**
 * WordPress dependencies
 */
import { useContext } from '@wordpress/element';

/**
 * Internal dependencies
 */
import { StoreContext } from '../utils/store';

export default () => useContext(StoreContext);