Component with closure of state and dispatch will make React replace everyting inside AppBody on every re-render.

react-gotcha-closure-component.jsx

function AppComponent({state, dispatch}) {
    // Component with closure of state and dispatch will make React replace everyting 
    // inside AppBody on every re-render.
    function AppBody() { 
        switch (state.get('page')) {
            case "dish-details":
                return <DishDetails key='dishDetails'
                                 dish={core.getBestInformationOnSelectedDish(state)}
                                 nGuests={state.get("nGuests")}
                                 dispatch={dispatch}/>
            case "dinner-overview":
                return <DinnerOverview nGuests={state.get('nGuests')}
                                       menu={core.getMenuDishes(state)}
                                       dispatch={dispatch}/>;
            case "print-dinner":
                return <PrintDinner nGuests={state.get('nGuests')}
                                    menu={core.getMenuDishes(state)}
                                    dispatch={dispatch}/>;
            default:
                return <WelcomeView dispatch={dispatch}/>;
        }
    }

    return [
        <header key="header">
            <h1>Dinner Planner</h1>
        </header>,
        <AppBody key="body"/>,
        <footer key="footer">Lab Group 5 - Daniel Schlaug & Siddhant Gupta</footer>
    ];
}