Last active
October 23, 2018 05:13
-
-
Save James-E-Adams/aa3c2fa327f0de9fd9d8b90f9c8cb72c to your computer and use it in GitHub Desktop.
Functional React Article Snippet #3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Or better: | |
| // same imports as before plus... | |
| import compose from 'recompose/compose' | |
| const Farm = compose( | |
| withState("tools", "setTools", ["hammer", "scythe", "sickle"]), | |
| lifecycle({ didMount }), | |
| branch(shouldNotRender, renderNothing), | |
| onlyUpdateForKeys(["tools"]) | |
| )(BaseFarm) | |
| // Alternatively. | |
| const enhance = compose( | |
| withState("tools", "setTools", ["hammer", "scythe", "sickle"]), | |
| lifecycle({ didMount }), | |
| branch(shouldNotRender, renderNothing), | |
| onlyUpdateForKeys(["tools"]) | |
| ) | |
| // enhance is a HOC, composed of a few other HOCs. | |
| // It takes a component (BaseFarm) and returns Farm. | |
| const Farm = enhance(({ someProp, anotherProp, tools }) => ( | |
| <div> | |
| Here are all the tools in the farm: | |
| <ul> | |
| {tools.map((tool, index) => ( | |
| <li key={index}> {tool} </li> | |
| ))} | |
| </ul> | |
| {someProp} - {anotherProp} | |
| </div> | |
| )) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment