Skip to content

Commit 86d405b

Browse files
wgao19timdorr
authored andcommitted
docs: add redux v.s. context difference FAQ entry (#3470)
* docs: add redux v.s. context difference FAQ entry * PR review suggestions * Capitalize React Context
1 parent 8aca937 commit 86d405b

File tree

1 file changed

+20
-0
lines changed

1 file changed

+20
-0
lines changed

docs/faq/ReactRedux.md

+20
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ hide_title: true
1515
- [How can I speed up my mapStateToProps?](#how-can-i-speed-up-my-mapstatetoprops)
1616
- [Why don't I have this.props.dispatch available in my connected component?](#why-dont-i-have-this-props-dispatch-available-in-my-connected-component)
1717
- [Should I only connect my top component, or can I connect multiple components in my tree?](#should-i-only-connect-my-top-component-or-can-i-connect-multiple-components-in-my-tree)
18+
- [How does Redux compare to the React Context API?](#how-does-redux-compare-to-the-react-context-api)
1819

1920
## React Redux
2021

@@ -184,3 +185,22 @@ In general, try to find a balance between understandable data flow and areas of
184185
- [#756: container vs component?](https://github.com/reduxjs/redux/issues/756)
185186
- [#1176: Redux+React with only stateless components](https://github.com/reduxjs/redux/issues/1176)
186187
- [Stack Overflow: can a dumb component use a Redux container?](http://stackoverflow.com/questions/34992247/can-a-dumb-component-use-render-redux-container-component)
188+
189+
### How does Redux compare to the React Context API?
190+
191+
**Similarities**
192+
193+
Both Redux and React's Context API deal with "prop drilling". That said, they both allow you to pass data without having to pass the props through multiple layers of components. Internally, Redux _uses_ the React context API that allows it to pass the store along your component tree.
194+
195+
**Differences**
196+
197+
With Redux, you get the the power of [Redux Dev Tools Extension](https://github.com/zalmoxisus/redux-devtools-extension). It automatically logs every action your app performs, and it allows time traveling – you can click on any past action and jump to that point in time. Redux also supports the concept of middleware, where you may bind customized function calls on every action dispatch. Such examples include an automatic event logger, interception of certain actions, etc.
198+
199+
With React's Context API, you deal with a pair of components speaking only to each other. This gives you nice isolation between irrelevant data. You also have the flexibility of how you may use the data with your components, i.e., you can provide the state of a parent component, and you may pass context data as props to wrapped components.
200+
201+
There is a key difference in how Redux and React's Context treat data. Redux maintains the data of your whole app in a giant, stateful object. It deduces the changes of your data by running the reducer function you provide, and returns the next state that corresponds to every action dispatched. React Redux then optimizes component rendering and makes sure that each component re-renders only when the data it needs change. Context, on the other hand, does not hold any state. It is only a conduit for the data. To express changes in data you need to rely on the state of a parent component.
202+
203+
#### Further information
204+
205+
- [Redux vs. The React Context API](https://daveceddia.com/context-api-vs-redux/)
206+
- [You Might Not Need Redux (But You Can’t Replace It With Hooks)](https://www.simplethread.com/cant-replace-redux-with-hooks/)

0 commit comments

Comments
 (0)