index.html

<!DOCTYPE html><html><head><meta charSet="utf-8" class="next-head next-head"/><title class="next-head">React patterns &amp; techniques to use in development for React Developers</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" class="next-head"/><link rel="shortcut icon" href="../static/favicon.ico" class="next-head"/><meta name="description" content="React patterns &amp; techniques to use in development for React Developers." class="next-head"/><meta name="author" content="Bunlong" class="next-head"/><meta property="og:type" content="website" class="next-head"/><meta property="og:url" content="https://reactpatterns.github.io" class="next-head"/><meta property="og:title" content="React patterns &amp; techniques to use in development for React Developers" class="next-head"/><meta property="og:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><meta property="og:description" content="React patterns &amp; techniques to use in development for React Developers." class="next-head"/><meta name="twitter:card" content="summary" class="next-head"/><meta name="twitter:site" content="@reactjspatterns" class="next-head"/><meta name="twitter:title" content="React patterns &amp; techniques to use in development for React Developers" class="next-head"/><meta name="twitter:description" content="React patterns &amp; techniques to use in development for React Developers." class="next-head"/><meta name="twitter:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><link href="../static/styles.css" rel="stylesheet" class="next-head"/><link rel="preload" href="/{reponame}/_next/ab709692-2bc9-40f5-a1cd-87202150d7a1/page/index.js" as="script"/><link rel="preload" href="/{reponame}/_next/ab709692-2bc9-40f5-a1cd-87202150d7a1/page/_error.js" as="script"/><link rel="preload" href="/{reponame}/_next/ab709692-2bc9-40f5-a1cd-87202150d7a1/main.js" as="script"/></head><body><div id="__next"><div data-reactroot=""><div id="container"><div id="about">[ <a href="https://github.com/codefacebook/react-patterns" target="_blank">Github</a> | <a href="https://twitter.com/reactjspatterns" target="_blank">Twitter</a> ]</div><header><h2><a href="/">React Patterns &amp; Techniques</a></h2></header><h1>Table of Contents</h1><ul><ul><li><a href="/Async-initialization-in-componentDidMount/">Async initialization in componentDidMount()</a></li><li><a href="/Functional-setState-(Pass-a-function-to-setState)/">Functional setState (Pass a function to setState)</a></li><li><a href="/Higher-order-function/">Higher order function</a></li><li><a href="/Higher-order-component/">Higher order component - Props proxy</a></li><li><a href="/Accessing-a-child-component/">Accessing a child component</a></li><li><a href="/JSX-spread-attributes/">JSX spread attributes</a></li><li><a href="/Render-callback/">Render callback</a></li><li><a href="/Function-as-child-component/">Function as child component</a></li><li><a href="/Function-as-prop-component/">Function as prop component</a></li><li><a href="/Component-injection/">Component injection</a></li><li><a href="/Conditional-rendering/">Conditional rendering</a></li><li><a href="/Destructuring/">Destructuring</a></li><li><a href="/Destructuring-function-arguments/">Destructuring function arguments</a></li><li><a href="/Nested-destructuring/">Nested destructuring</a></li><li><a href="/Destructuring-rest-and-spread-operator/">Destructuring rest/spread operator</a></li><li><a href="/Promises-over-callbacks/">Promises over Callbacks</a></li><li><a href="/Functional-stateless-component/">Functional stateless component (known as Presentational component)</a></li><li><a href="/Container-component/">Container component (known as Stateful component)</a></li><li><a href="/State-hoisting/">State hoisting</a></li><li><a href="/Props-in-initial-state-is-an-anti-patterns/">Props in Initial State is an Anti-Patterns</a></li><li><a href="/shouldComponentUpdate-avoid-heavy-re-renders/">shouldComponentUpdate avoid heavy re-renders</a></li><li><a href="/Indexes-as-a-key-is-an-anti-patterns/">Indexes as a key is an anti-patterns</a></li><li><a href="/Spreading-props-on-DOM-elements-is-an-anti-patterns/">Spreading props on DOM elements is an anti-patterns</a></li><li><a href="/PureComponent-avoid-heavy-re-renders/">PureComponent avoid heavy re-renders</a></li></ul></ul><footer>© 2018 <a href="https://github.com/codefacebook" target="_blank">codefacebook</a>, Maintained by <a href="https://github.com/Bunlong" target="_blank">Bunlong</a> | Website built with <a href="https://reactjs.org" target="_blank">React</a> &amp; <a href="https://github.com/zeit/next.js" target="_blank">Next.js</a> | ReactPatterns on [ <a href="https://github.com/codefacebook/react-patterns" target="_blank">Github</a> | <a href="https://twitter.com/reactjspatterns" target="_blank">Twitter</a> ]</footer></div></div></div><div id="__next-error"></div><script>
          __NEXT_DATA__ = {"props":{"posts":[{"id":"1","slug":"Async-initialization-in-componentDidMount","title":"Async initialization in componentDidMount()","status":true},{"id":"2","slug":"Functional-setState-(Pass-a-function-to-setState)","title":"Functional setState (Pass a function to setState)","status":true},{"id":"3","slug":"Higher-order-function","title":"Higher order function","status":true},{"id":"4","slug":"Higher-order-component","title":"Higher order component - Props proxy","status":true},{"id":"5","slug":"Accessing-a-child-component","title":"Accessing a child component","status":true},{"id":"6","slug":"JSX-spread-attributes","title":"JSX spread attributes","status":true},{"id":"7","slug":"Render-callback","title":"Render callback","status":true},{"id":"8","slug":"Function-as-child-component","title":"Function as child component","status":true},{"id":"9","slug":"Function-as-prop-component","title":"Function as prop component","status":true},{"id":"10","slug":"Component-injection","title":"Component injection","status":true},{"id":"11","slug":"Conditional-rendering","title":"Conditional rendering","status":true},{"id":"12","slug":"Destructuring","title":"Destructuring","status":true},{"id":"13","slug":"Destructuring-function-arguments","title":"Destructuring function arguments","status":true},{"id":"14","slug":"Nested-destructuring","title":"Nested destructuring","status":true},{"id":"15","slug":"Destructuring-rest-and-spread-operator","title":"Destructuring rest/spread operator","status":true},{"id":"16","slug":"Promises-over-callbacks","title":"Promises over Callbacks","status":true},{"id":"17","slug":"Functional-stateless-component","title":"Functional stateless component (known as Presentational component)","status":true},{"id":"18","slug":"Container-component","title":"Container component (known as Stateful component)","status":true},{"id":"19","slug":"State-hoisting","title":"State hoisting","status":true},{"id":"20","slug":"Props-in-initial-state-is-an-anti-patterns","title":"Props in Initial State is an Anti-Patterns","status":true},{"id":"22","slug":"shouldComponentUpdate-avoid-heavy-re-renders","title":"shouldComponentUpdate avoid heavy re-renders","status":true},{"id":"24","slug":"Indexes-as-a-key-is-an-anti-patterns","title":"Indexes as a key is an anti-patterns","status":true},{"id":"25","slug":"Spreading-props-on-DOM-elements-is-an-anti-patterns","title":"Spreading props on DOM elements is an anti-patterns","status":true},{"id":"26","slug":"PureComponent-avoid-heavy-re-renders","title":"PureComponent avoid heavy re-renders","status":true},{"id":"27","slug":"If-else","title":"If else","status":false},{"id":"28","slug":"Ternary-operation","title":"Ternary operation","status":false},{"id":"29","slug":"Logical-and-operator","title":"Logical and operator","status":false},{"id":"30","slug":"Switch-case-operator","title":"Switch case operator","status":false},{"id":"31","slug":"Conditional-rendering-with-enum","title":"Conditional rendering with enum","status":false},{"id":"32","slug":"Multi-level-conditional-rendering","title":"Multi level conditional rendering","status":false},{"id":"33","slug":"With-higher-order-component","title":"With higher order component","status":false},{"id":"34","slug":"External-templating-component","title":"External templating component","status":false}]},"page":"/","pathname":"/","query":{},"buildId":"ab709692-2bc9-40f5-a1cd-87202150d7a1","assetPrefix":"/{reponame}","nextExport":true,"err":null,"chunks":[]}
          module={}
          __NEXT_LOADED_PAGES__ = []
          __NEXT_LOADED_CHUNKS__ = []

          __NEXT_REGISTER_PAGE = function (route, fn) {
            __NEXT_LOADED_PAGES__.push({ route: route, fn: fn })
          }

          __NEXT_REGISTER_CHUNK = function (chunkName, fn) {
            __NEXT_LOADED_CHUNKS__.push({ chunkName: chunkName, fn: fn })
          }

          false
        </script><script async="" id="__NEXT_PAGE__/" src="/{reponame}/_next/ab709692-2bc9-40f5-a1cd-87202150d7a1/page/index.js"></script><script async="" id="__NEXT_PAGE__/_error" src="/{reponame}/_next/ab709692-2bc9-40f5-a1cd-87202150d7a1/page/_error.js"></script><script src="/{reponame}/_next/ab709692-2bc9-40f5-a1cd-87202150d7a1/main.js" async=""></script></body></html>