[
{
"path": ".all-contributorsrc",
"content": "{\n \"projectName\": \"react-advanced-patterns\",\n \"projectOwner\": \"manjula91\",\n \"repoType\": \"github\",\n \"repoHost\": \"https://github.com\",\n \"files\": [\n \"README.md\"\n ],\n \"imageSize\": 100,\n \"commit\": true,\n \"contributors\": [\n {\n \"login\": \"manjula91\",\n \"name\": \"Manjula Subhashchandra Dube\",\n \"avatar_url\": \"https://avatars0.githubusercontent.com/u/7845921?v=4\",\n \"profile\": \"https://www.linkedin.com/profile/view?id=181968473&trk=nav_responsive_tab_profile\",\n \"contributions\": [\n \"doc\",\n \"code\",\n \"example\"\n ]\n },\n {\n \"login\": \"vivek12345\",\n \"name\": \"Vivek Nayyar\",\n \"avatar_url\": \"https://avatars3.githubusercontent.com/u/4931048?v=4\",\n \"profile\": \"https://www.viveknayyar.in/\",\n \"contributions\": [\n \"doc\",\n \"code\",\n \"example\"\n ]\n },\n {\n \"login\": \"ryands17\",\n \"name\": \"Ryan Dsouza\",\n \"avatar_url\": \"https://avatars2.githubusercontent.com/u/19697099?v=4\",\n \"profile\": \"https://github.com/ryands17\",\n \"contributions\": [\n \"doc\",\n \"example\"\n ]\n },\n {\n \"login\": \"meghna-saxena\",\n \"name\": \"Meghna Srivastava\",\n \"avatar_url\": \"https://avatars3.githubusercontent.com/u/18181755?v=4\",\n \"profile\": \"https://meghnasrivastava.herokuapp.com\",\n \"contributions\": [\n \"doc\",\n \"example\"\n ]\n },\n {\n \"login\": \"EdwardDrapkin\",\n \"name\": \"Edward Drapkin\",\n \"avatar_url\": \"https://avatars1.githubusercontent.com/u/6296006?v=4\",\n \"profile\": \"https://github.com/EdwardDrapkin\",\n \"contributions\": [\n \"doc\",\n \"example\"\n ]\n },\n {\n \"login\": \"felipediogo\",\n \"name\": \"Felipe F. Diogo\",\n \"avatar_url\": \"https://avatars3.githubusercontent.com/u/26486135?v=4\",\n \"profile\": \"https://github.com/felipediogo\",\n \"contributions\": [\n \"doc\",\n \"example\"\n ]\n },\n {\n \"login\": \"alexrohleder\",\n \"name\": \"Alex Rohleder\",\n \"avatar_url\": \"https://avatars2.githubusercontent.com/u/7248028?v=4\",\n \"profile\": \"https://www.alexrohleder.com\",\n \"contributions\": [\n \"doc\",\n \"example\"\n ]\n },\n {\n \"login\": \"5achinJani\",\n \"name\": \"Sachin Jani\",\n \"avatar_url\": \"https://avatars3.githubusercontent.com/u/23077544?v=4\",\n \"profile\": \"https://twitter.com/5achinJani\",\n \"contributions\": [\n \"doc\",\n \"example\"\n ]\n },\n {\n \"login\": \"garetmckinley\",\n \"name\": \"Garet McKinley\",\n \"avatar_url\": \"https://avatars0.githubusercontent.com/u/1624279?v=4\",\n \"profile\": \"https://garet.io\",\n \"contributions\": [\n \"doc\",\n \"example\"\n ]\n },\n {\n \"login\": \"kuldeepkeshwar\",\n \"name\": \"anotherjsguy\",\n \"avatar_url\": \"https://avatars1.githubusercontent.com/u/10448534?v=4\",\n \"profile\": \"https://in.linkedin.com/in/kuldeepkeshwar\",\n \"contributions\": [\n \"doc\",\n \"example\"\n ]\n }\n ]\n}\n"
},
{
"path": ".gitignore",
"content": "node_modules"
},
{
"path": "README.md",
"content": "# React Advanced Patterns \n\n[](#contributors)\n\n This repo is maintained to have collection of react patterns & best practices used in the community. This repo provides you the collated list of all the patterns used in the community. If You have discovered one & would love to share your own react pattern simply send us a PR π
\n\nThis is highly inspired from [Michael Jackson](https://github.com/mjackson) & [Kent C. Dodds.](https://twitter.com/kentcdodds) So special thanks to them for the lovely react patterns in life π\n\n#### React Advanced Patterns\n\n- [Compound Components](https://github.com/manjula91/react-advanced-patterns/tree/master/compound-components)\n- [Flexible Compound Components](https://github.com/manjula91/react-advanced-patterns/tree/master/flexible-compound-components)\n- [Prop Collection](https://github.com/manjula91/react-advanced-patterns/tree/master/prop-collection)\n- [Prop Getters](https://github.com/manjula91/react-advanced-patterns/tree/master/prop-getters)\n- [Render Props](https://github.com/manjula91/react-advanced-patterns/tree/master/render-props)\n- [State Reducers](https://github.com/manjula91/react-advanced-patterns/tree/master/state-reducers)\n- [Higher Order Components](https://github.com/manjula91/react-advanced-patterns/tree/master/hoc)\n- [Provider Pattern](https://github.com/manjula91/react-advanced-patterns/tree/master/provider-pattern)\n- [React Hooks](https://github.com/manjula91/react-advanced-patterns/tree/master/hooks)\n\n#### Best Practices when you React\n\n- [Functional setState](https://github.com/manjula91/react-advanced-patterns/tree/master/react-best-practices/#function-in-setstate)\n- [Get Rid of Unnecessary updates in React](https://github.com/manjula91/react-advanced-patterns/tree/master/react-best-practices/#why-did-you-update)\n- [Destructuring and spreading props](https://github.com/manjula91/react-advanced-patterns/tree/master/react-best-practices/#prop-spread)\n- [Runtime type checking with prop types](https://github.com/manjula91/react-advanced-patterns/tree/master/react-best-practices/#prop-types)\n- [Using defaultProps](https://github.com/manjula91/react-advanced-patterns/tree/master/react-best-practices/#default-props)\n- [Using displayName](https://github.com/manjula91/react-advanced-patterns/tree/master/react-best-practices/#display-name)\n- [Conditional Rendering](https://github.com/manjula91/react-advanced-patterns/tree/master/react-best-practices/#conditional-rendering)\n\nIf you want to propose a pattern you should submit it with below points:\n\n- What is so special about this pattern?\n- Use case or inspired from ?\n- Example ([CodesandBox](https://codesandbox.io/) preferred)\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\n\n| [Manjula Subhashchandra Dube Vivek Nayyar Ryan Dsouza Meghna Srivastava Edward Drapkin Felipe F. Diogo Alex Rohleder Sachin Jani Garet McKinley anotherjsguy ``` and `````` elements in HTML. Apart they don't do too much, but together they allow you to create the complete experienceβββ[Kent C. Dodds.](https://twitter.com/kentcdodds)\r\n\r\n### What is so special about this pattern\r\n\r\nCompound Component allows us as a developer to have a full control over the rendering behavior, that gives us, ability to decide in what order the component should render. \r\n\r\nCompound Component also reduces the tension of passing tons & tons of configuration as a prop.\r\nTake a look at the documentation for semantic-ui-react, their Form component is all about Compound Component.\r\n\r\n```jsx\r\nimport { Form } from 'semantic-ui-react'\r\n\r\nconst Usage = () => (\r\n \r\n)\r\n\r\n```\r\n\r\n\r\n### Code Sandbox Example\r\n\r\nBelow is an example of grouping the RadioButton highly inspired by [semantic-ui-react](https://react.semantic-ui.com/collections/form/)\r\n\r\n[Grouping the radio buttons](https://codesandbox.io/s/z32mw29474)\r\n"
},
{
"path": "flexible-compound-components/README.md",
"content": "# Flexible Compound Components\r\n\r\nWhat are Flexible Compound Components?\r\n\r\n* This is better version of compound components which makes use of context API and compound component together. This will work even if your order of component changes (which is quite often). This will basically allow user to have more flexibility by using React context to share the implicit state to our child components. We will start with defining childContextTypes, providing the value with getChildContext, and, on each of the components that need that context, we define contextTypes so that React will pass the context that is being asked for. This is more flexible than just using compound components. The consumer component are basically designed in a way that they use render prop in order to work.\r\n\r\n### Example\r\n\r\nThis is an example of grouping the RadioButton highly inspired by [semantic-ui-react](https://react.semantic-ui.com/collections/form/). \r\n\r\n[Grouping the radio buttons](https://codesandbox.io/s/z304lk196l)\r\n\r\n"
},
{
"path": "hoc/README.md",
"content": "# Higher Order Components\n\n### What are Higher Order Components\n\nHigher order components are a pattern in which a function accepts a component and returns an enhanced version of the component by injecting the required props.\n\n### What is so special about this pattern\n\nHOC's are a pattern used a lot. The most common being the `connect` method of `react-redux` or `withRouter` of `react-router-dom`. This pattern wraps the given Component and returns the same component just by adding extra props to it. This type of function should be pure as it cannot modify the original component, just enhance it.\n\nThe drawback to HOC's is prop-collision. A component wrapped with two or more higher order methods could have props of the same name and any one of those could be overriden. This is where render-props comes to the rescue.\n\nFor prop-collision, lets take the same example as the one in the example section. What if instead of one set of data, I have to render two sets of data, which means I need two fetch hoc's.\n\nThe code will be something like this -\n\n```jsx\nlet App = fetchHOC({ url: 'my-url-1' })(App)\nApp = fetchHOC({ url: 'my-url-2' })(App)\n```\n\nThe data prop being the same will cause just one set of data to be displayed, which is incorrect. Now take a look at the render-prop example and see for yourself that this case can be easily handled.\n\n### Example\n\nThis example demonstrates how we can use the Fetch API as a higher order component.\n\n[Fetch using HOC](https://codesandbox.io/s/734060mlm6)\n"
},
{
"path": "hooks/README.md",
"content": "# Hooks\n\n### What are hooks ?\n\nHooks are a new feature proposal that lets you use state and other React features without writing a class. Theyβre currently in React v16.7.0-alpha and being discussed in an open RFC.\n\n### What is so special about hooks?\n\nWith Hooks, you can extract stateful logic from a component so it can be tested independently and reused. Hooks allow you to reuse stateful logic without changing your component hierarchy. This makes it easy to share Hooks among many components or with the community.\n\nAn example of this can be the useState hook. With this hook you no-longer would need a class component to maintain state.\nA functional component with useState hook can maintain state and also perform some side-effects like data-fetching using another well known hook called as useEffect\n\n```jsx\nimport { useState } from \"react\";\n\nfunction Example() {\n // Declare a new state variable, which we'll call \"count\"\n const [count, setCount] = useState(0);\n\n return (\n \n
You clicked {count} times
\n
setCount(count + 1)}>Click me \n
{\n onChange()\n myOnChangeMethod()\n }}\n/>\n```\n\nA better solution is to provide our method using prop-getters\n\n```jsx\nFunction in `setState` π β€οΈ \r\n\r\nThis is not a pattern but infact a best practice when interacting with your `state` in React.\r\n\r\nInstead of passing an object to `setState()`, pass a function instead. The function will be called with the current state of the component, even if the component itself has not been updated yet. The React Reconciler may merge concurrent state updates into a single lifecycle, which can create subtle and hard to find bugs in your code. In the case of a counter, a call like `this.setState({counter: this.state.counter++})` that happens on a user interaction may get fired 5 or 10 times before a React lifecycle occurs, which will lead to stale values in `this.state.counter`. **Values in this.state are not updated until React renders your component** and passing a function to `setState()` (e.g. `this.setState(state => ({counter: state.counter+1}))` will ensure your state is updated with the latest value instead of the latest _rendered_ value.\r\n\r\nFurther reading in [React's issue tracker](https://github.com/facebook/react/issues/11527)\r\n\r\n# Get rid of unnecessary updates in React \r\n\r\nIf you want to get rid of unnecessary rerenders and updates in React. Try [why-did-you-update](https://github.com/maicki/why-did-you-update)\r\n\r\nUsage:\r\n\r\n```\r\nimport React from 'react';\r\n\r\nif (process.env.NODE_ENV !== 'production') {\r\n const {whyDidYouUpdate} = require('why-did-you-update');\r\n whyDidYouUpdate(React);\r\n}\r\n```\r\nThis library is available on npm, install it with: ```npm install --save why-did-you-update``` or ```yarn add why-did-you-update```.\r\n\r\nWhy did you update is a function that monkey patches React and notifies you in the console when potentially unnecessary re-renders occur.\r\n\r\nHere's the [example](https://codesandbox.io/s/jnrx7j30vy)\r\n\r\nIn the example if you change your component.js to the below code. It will avoid unnecessary re-renders.That is, the component only needs to re-render when its props change. React has a special type of component built-in called PureComponent that is meant for exactly this use case.\r\n\r\nInstead of inheriting from React.Component, use React.PureComponent like this:\r\n\r\n```\r\nclass C extends React.PureComponent {\r\n render() {\r\n return Age: {this.props.age}
\r\n }\r\n}\r\n\r\n```\r\n\r\n# Destructuring and spreading props \r\n\r\nThe ESNext Javascript has some great features and this is one of them. While passing props to a child component, we can spread the entire props we need to pass instead of passing them individually.\r\n\r\nInstead of this\r\n\r\n```jsx\r\nconst props = { a: 1, b: 2 }\r\n\r\nRuntime type checking with prop types \r\n\r\nProp types are very important for checking the validity of props being passed to the component. Prop types help in determining whether the all the props have been passed correctly along with their data types at runtime. This helps identify issues in your component as well as you get prop information just by looking at the component file.\r\n\r\nProp types can be accessed by installing a package `prop-types`.\r\n\r\n```jsx\r\nimport React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nclass MyCompnent extends React.Component {\r\n render() {\r\n const { prop1, prop2 } = this.props\r\n return (\r\n \r\n
Prop 1: {prop1}
\r\n
Prop 2: {prop2}
\r\n
Using defaultProps \r\n\r\nDefault Props is a very useful feature as we can define props that do not need to be passed explicitly or when the prop has more than one value (enum type) and a single value will always be present regardless.\r\n\r\nDefault props just like prop-types can be set on any component like this\r\n\r\n```jsx\r\nconst MyComponent = ({ color }) => (\r\n \r\n)\r\n\r\nMyComponent.propTypes = {\r\n color: PropTypes.oneOf(['red', 'green', 'blue'])\r\n}\r\n\r\nMyComponent.defaultProps = {\r\n color: 'red'\r\n}\r\n```\r\n\r\nNow the value of `color` prop will always be **red** whenever you don't pass it explicitly.\r\n\r\n# Using displayName \r\n\r\nDisplay name is something that we should use when we create components as these are helpful in debugging.\r\n\r\nThe React DevTools shows the component name in the rendered component tree. This name is usually the name of the class in Class components\r\nFor example\r\n\r\n```jsx\r\nclass MyComponent extends React.Component { ... }\r\n```\r\n\r\nHere the component name `MyComponent` will be shown in the devTools. But for functional components defined like this, you should add a displayName for debugging purposes.\r\n\r\n```jsx\r\nconst MyComponent = props => { ... }\r\n\r\nMyComponent.displayName = 'My Component'\r\n```\r\n\r\nThis method is extremely useful when you are dealing with Higher Order Components because they provide a name that doesn't reflect the component you are wrapping. Instead, you can modify and use the originally provided name to demonstrate that something was wrapped.\r\n\r\n```\r\nfunction connectToStore(storeName, Component) {\r\n const componentName = Component.displayName || Component.name || 'anonymous'; // can't be sure the component is following best practices!\r\n const name = `connectedTo${storeName}(${componentName})`;\r\n \r\n const wrapped = () => {\r\n return Conditional Rendering \r\n\r\nAlso, when you only want to render an element on one condition, instead of doing thisβ¦\r\n\r\n```jsx\r\n{\r\n isTrue ? True!
: True!
\r\n}\r\n```\r\n\r\nA note to consider, while conditionally rendering based on the length of an array, compare the length conditionally and then render.\r\n\r\nFor example, if you do this\r\n\r\n```jsx\r\n{\r\n myArray.length && True!
\r\n}\r\n```\r\n\r\nThis will render **0**. As 0 is falsy, the condition will short-circuit and because of that 0 will be rendered.\r\n\r\nInstead, do this\r\n\r\n```jsx\r\n{\r\n myArray.length > 0 && True!
\r\n}\r\n```\r\n\r\nOr this\r\n\r\n```jsx\r\n{\r\n Boolean(myArray.length) && True!
\r\n}\r\n```\r\n"
},
{
"path": "render-props/README.md",
"content": "# Render props\n\n### What are render props\n\nRender props are simply props that accept a function.\n\n### What is so special about this pattern\n\nRender props separate logic from the UI. The component that implements the logic doesn't decide how the UI is rendered, which is why I like this pattern a lot. The other reason is how easy it is to make the entire component declarative by just rendering what you need.\n\nWe can easily extend the API of our component and access only the logic required for rendering the UI. This makes render props more flexible as compared to Higher Order Components.\n\nAlso almost all patterns implemented using HOC's can be easily converted to the Render Prop pattern.\n\n### Example\n\nThis is a simple example of how the imperative fetch API can be converted into a declarative one (inspired by Apollo's Query component).\n\n[Fetch using render props](https://codesandbox.io/s/9yzwmkj7kp)\n"
},
{
"path": "state-reducers/README.md",
"content": "# State Reducer\n\n### What is a State Reducer\n\nState Reducer is a pattern where you can set the state of the component in a way similar to the reducer function in Redux.\n\n### What is so special about this pattern\n\nState Reducer pattern is pretty similar to the Redux reducer. It takes the previous state along with the current changes to be made in the state and merges them.\n\nThe main advantage of this pattern is that we can use the same components we have, without modifying the existing API and add a new way of updating state whilst keeping the UI separate from the logic (because of the widely loved render-props pattern). The reducer method which we write can be re-used in other components as we do not need to manage the state in our component.\n\nThis pattern stands out when all you want is to extend you API for state changes and keeping the current functionality untouched.\n\n### Example\n\nThis is an example of how a simple Form component can provide a different API altogether for creating a form.\n\n[Forms with State Reducers](https://codesandbox.io/s/9802yr86q4)\n\nHere is another example showing the use of multiple reducers for the state reduer pattern.\n\n[Multiple State Reducers](https://codesandbox.io/s/1o8o2xzm37)\n"
}
] ![](\"https://avatars0.githubusercontent.com/u/7845921?v=4\")
![](\"https://avatars3.githubusercontent.com/u/4931048?v=4\")
![](\"https://avatars2.githubusercontent.com/u/19697099?v=4\")
![](\"https://avatars3.githubusercontent.com/u/18181755?v=4\")
![](\"https://avatars1.githubusercontent.com/u/6296006?v=4\")
![](\"https://avatars3.githubusercontent.com/u/26486135?v=4\")
![](\"https://avatars2.githubusercontent.com/u/7248028?v=4\")
![](\"https://avatars3.githubusercontent.com/u/23077544?v=4\")
![](\"https://avatars0.githubusercontent.com/u/1624279?v=4\")
![](\"https://avatars1.githubusercontent.com/u/10448534?v=4\")