I stopped the data flow – on React best practices

<p class="wp-block-paragraph">Reading the interesting article from Dan Abramov:<br><a href="https://overreacted.io/writing-resilient-components/" target="_blank" rel="noreferrer noopener" aria-label="https://overreacted.io/writing-resilient-components/ (opens in a new tab)">https://overreacted.io/writing-resilient-components/</a></p> <p class="wp-block-paragraph">I stopped at memoization. I did not know this technic before, but simply because nobody care so much about names before functional programming. And so I discovered how large is the cover of react hooks, useMemo() that does</p> <p class="wp-block-paragraph"><a href="https://github.com/alexreardon/memoize-one" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">https://github.com/alexreardon/memoize-one</a></p> <p class="wp-block-paragraph">In a cleaner way with the hook, in my opionion</p> <p class="wp-block-paragraph">It recall me the lodash.throttle() function, but relation I setted for this is obscure, I think it is because of optimization nature of both the concepts: do not refesh too often (_.throttle), do not recalculate if source not changed (memoize)</p> <p class="wp-block-paragraph">But I further goes insight on react hooks, and I found redux-react-hook</p> <p class="wp-block-paragraph"><a href="https://github.com/facebookincubator/redux-react-hook">https://github.com/facebookincubator/redux-react-hook</a></p> <p class="wp-block-paragraph">it looks simplier.</p> <p class="wp-block-paragraph">But from the point of view of testing, hooks can not be mocked, or it could but providing a reduced store.<br> While when using HOC one can just test the inner component (LOC?) providing just properties, here the hook refers to a library.<br> To separate these and relay only on properties, the properties should be functions: useDispatch() and useMappedState() should become<br> this.props.useDispatch and this.props.useMappedState</p> <p class="wp-block-paragraph">That would make code less appealing, but really not so bad, changing the example of project README.md</p> <pre class="wp-block-preformatted">export function DeleteButton({index,useDispatch, useMappedState}) {<br> ….<br> }</pre> <p class="wp-block-paragraph">just the function-component declaration is changed, and still code is testable injecting the right functions</p> <p class="wp-block-paragraph">Anyway, given the concept behind redux, using two provider calling reducers should not be a problem, I mean, the switch can be progressive</p>

export function DeleteButton({index,useDispatch, useMappedState}) {

 ….

}