ReactJS, gdzie trzymać informacje na temat stanu UI?

Od kilku dni po pracy bawię się reactem i obecnie chciałem przepisac swojego niewieliego CRM'a, żeby używał go jako frontendu. Na pierwszy ogień poszła nawigacja. Otóż w tym momencie wygląda to tak, że mamy z lewej strony fixed sidebar 64 => 240 px który możemy togglować co nam zwęża lub rozszerza content. Nie bardzo miałem pomysł jak to ogarnąć i wymśliłem coś takiego (to oczwiście szkic):

const root = document.getElementById('root');

class SideNav extends Component {
    render() {
        const {sideNavWidth, toggleSideNav} = this.props;
        const styles = {
            position: 'fixed',
            top: 0,
            left: 0,
            bottom: 0,
            width: sideNavWidth,
            margin: 0,
            padding: 0,
            background: '#EFEFEF'
        };

        return (
            <ul style={styles}>
                <li onClick={toggleSideNav}>Toggle</li>
                <li>Sidebar</li>
            </ul>
        )
    }
}

class Main extends Component {
    render() {
        const {sideNavWidth} = this.props;
        const styles = {
            height: 2000,
            width: 'calc(100% - ' + sideNavWidth + 'px)',
            marginLeft: 'auto',
            background: '#F6F6F6'
        };

        return (
            <div style={styles}>Main..</div>
        )
    }
}

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            sideNavWidth: 64
        }
    }

    render() {
        const {children} = this.props;
        const toggleSideNav = this.toggleSideNav;
        const {sideNavWidth} = this.state;
        return (
            <div>
                {cloneElement(children[0], {
                    sideNavWidth,
                    toggleSideNav
                })}
                {cloneElement(children[1], {
                    sideNavWidth
                })}
            </div>
        );
    }

    toggleSideNav = () => {
        const sideNavWidth = this.state.sideNavWidth === 64 ? 240 : 64;
        this.setState({
            ...this.state,
            sideNavWidth
        });
    }
}

ReactDOM.render(
    <App>
        <SideNav />
        <Main />
    </App>,
    root
);

Całą zawartość strony w tym momencie będę renderował z poziomu komponentu Main. Zastanawiam się, czy w tym wypadku nie lepiej jest trzymać informację o zwiniętym sidebarze w store i robic dispatch (uzywam reduxa) bo chciałbym w przyszłości zapamiętywać wybór użytkownika, więc sprawa się komplikuje gdyż nie będzie to tylko update 1 zmiennej.

Pytanie bardziej ogólne: czy trzymanie informacji o stanie komponentów (nie danych) w state jest okej?