Now that we have defined our context and provider, we can use the state object and the dispatch function in various components.

We start by removing the props that we manually passed to our components in src/App.js. Delete the following code segments marked in bold:

        <div style={{ padding: 8 }}>
            <Header text="React Hooks Blog" />
            <ChangeTheme theme={theme} setTheme={setTheme} />
            <br />
            <UserBar user={user} dispatch={dispatch} />
            <br />
            {user && <CreatePost user={user} posts={posts} dispatch={dispatch} />}
            <br />
            <hr />
            <PostList posts={posts} />
        </div>

As we are using contexts, there is no need to pass down props manually anymore. We can now move on to refactoring the components.