From b2d46f532b48636f8e6c74db26fb15f030096b8b Mon Sep 17 00:00:00 2001 From: Christian Weiss Date: Tue, 12 Sep 2017 14:24:17 -0700 Subject: [PATCH 1/2] add information about usage with react-redux to the readme --- README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/README.md b/README.md index 72a5716..636417c 100644 --- a/README.md +++ b/README.md @@ -270,6 +270,30 @@ type FactoryProps = { }; ``` +## Troubleshooting + +`react-stripe-elements` may not work properly when being used with components that implement `shouldComponentUpdate`. `react-stripe-elements` relies heavily on React's `context` feature and `shouldComponentUpdate` does not provide a way to take context updates into account when deciding whether to allow a re-render and hence can block context updates from reaching components. + +For example when using `react-stripe-elements` together with [`react-redux`](https://github.com/reactjs/react-redux) doing the following will not work: +```js +const Component = connect()(injectStripe(_Component)); +``` +In this case, the context updates originating from the `StripeProvider` are not reaching the components wrapped inside the `connect` function and therefore the behavior of `react-stripe-elements` breaks. The reason is that the `connect` function of `react-redux` [implements `shouldComponentUpdate`](https://github.com/reactjs/react-redux/blob/master/docs/troubleshooting.md#my-views-arent-updating-when-something-changes-outside-of-redux) and blocks re-renders that are triggered by context changes outside of the connected component. + +There are two ways to prevent this issue: + +1. Change the order of the functions to have `injectStripe` be the outermost one: + ```js + const Component = injectStripe(connect()(_CardForm)); + ``` + This works, because `injectStripe` does not implement `shouldComponentUpdate` itself, so context updates originating from the `redux` `Provider` will still reach all components. + +2. You can use the [`pure: false`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) option for `redux-connect`: + ```js + const Component = connect(mapStateToProps, mapDispatchToProps, mergeProps, { + pure: false, + })(injectStripe(_CardForm)); + ``` ## Development From 50ebb3244304c62b77b7c0c4bfb3786432f657ee Mon Sep 17 00:00:00 2001 From: Christian Weiss Date: Tue, 12 Sep 2017 18:50:22 -0700 Subject: [PATCH 2/2] reword --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 636417c..738ed8a 100644 --- a/README.md +++ b/README.md @@ -272,13 +272,13 @@ type FactoryProps = { ## Troubleshooting -`react-stripe-elements` may not work properly when being used with components that implement `shouldComponentUpdate`. `react-stripe-elements` relies heavily on React's `context` feature and `shouldComponentUpdate` does not provide a way to take context updates into account when deciding whether to allow a re-render and hence can block context updates from reaching components. +`react-stripe-elements` may not work properly when used with components that implement `shouldComponentUpdate`. `react-stripe-elements` relies heavily on React's `context` feature and `shouldComponentUpdate` does not provide a way to take context updates into account when deciding whether to allow a re-render. These components can block context updates from reaching `react-stripe-element` components in the tree. -For example when using `react-stripe-elements` together with [`react-redux`](https://github.com/reactjs/react-redux) doing the following will not work: +For example, when using `react-stripe-elements` together with [`react-redux`](https://github.com/reactjs/react-redux) doing the following will not work: ```js const Component = connect()(injectStripe(_Component)); ``` -In this case, the context updates originating from the `StripeProvider` are not reaching the components wrapped inside the `connect` function and therefore the behavior of `react-stripe-elements` breaks. The reason is that the `connect` function of `react-redux` [implements `shouldComponentUpdate`](https://github.com/reactjs/react-redux/blob/master/docs/troubleshooting.md#my-views-arent-updating-when-something-changes-outside-of-redux) and blocks re-renders that are triggered by context changes outside of the connected component. +In this case, the context updates originating from the `StripeProvider` are not reaching the components wrapped inside the `connect` function. Therefore, `react-stripe-elements` components deeper in the tree break. The reason is that the `connect` function of `react-redux` [implements `shouldComponentUpdate`](https://github.com/reactjs/react-redux/blob/master/docs/troubleshooting.md#my-views-arent-updating-when-something-changes-outside-of-redux) and blocks re-renders that are triggered by context changes outside of the connected component. There are two ways to prevent this issue: