How to change context in Consumer instead of Provider?

Question

I found this question which answers to this problem with adding all context change functions to the topmost parent. React Context api - Consumer Does Not re-render after context changed

But this is awkward, I want the functions that change the context in the components that change it. Let's say I have a button that changes something in the content, I want to have the handleChange() in that component instead of clogging my parent with functions and states that don't belong there.

Is this possible to outsource context logic to components?

Answer 1

If you don't want the parent to have state and state-altering functions, just don't use context - it sounds like local component state is all you are looking for.

Answer 2

Yes, you need use useReducer. https://reactjs.org/docs/hooks-reference.html#usereducer

You create a single reducer with the help of useReducer and pass it into Context . After that, you can use state and the dispatch from any component that is connected to the context.

Links:

• https://reactjs.org/docs/hooks-reference.html#usereducer
• https://medium.com/octopus-labs-london/replacing-redux-with-react-hooks-and-context-part-1-11b72ffdb533
• When to use native React.useReducer Hook and how it differentiate from Redux
• https://www.simplethread.com/cant-replace-redux-with-hooks/

Answer 3

context is a just a fancy technique of passing props without worring about hierarchy.

Decoupling the data flow is the only differential when comparing with normal props . So changing the value of a context comes with the some caveats.

When you need to change a shared state between parent and child you need to lift your state up and pass down a way of changing it. With context is no different

---

Assume the following provider which pass down a theme and a way of chage it

export const context = createContext()
const { Provider } = context

export const ThemeProvider = ({ children }) => {
    const [theme, setTheme] = useState({ color: 'foo' })
    const value = { theme, setTheme }
    return (
        <Provider value={value}>
            {children}
        </Provider>
    )
}

You still need to pass down a handler to change the state. To change theme from inside a Component (which is descendent of ThemeProvider ) you can do like this

import { useContext } from 'react'
import {context} from './ThemeProvider'

const Component = () =>{
    const {theme, setTheme} = useContext(context)

    const handleChange = () => setTheme({color:'blue'})

    return <button onClick={handleChange}>Change</button>
}

---

Usually (not necessarily) Providers are declared in the top-level component App.js

//App.js
import { ThemeProvider } from './ThemeProvider'

const App = () =>{
    <ThemeProvider>
         <RestOffYourApp />
    </ThemeProvider>
}