Merge pull request #107 from bartstc/docs/extend-performance-section

Docs - extend performance section

docs/performance.md

@@ -28,8 +28,56 @@ const [state, setState] = React.useState(() => myExpensiveFn());
 
 - If you develop an application that requires the state to track many elements at once, you might consider state management libraries with atomic updates such as [recoil](https://recoiljs.org/) or [jotai](https://jotai.pmnd.rs/).
 
+- Use React Context wisely. React Context is good for low-velocity data like themes, user data, small local state etc. While dealing with medium-velocity/high-velocity data, you may consider using the [use-context-selector](https://github.com/dai-shi/use-context-selector) library that supports selectors (selectors are already built-in in most popular state management libraries like [zustand](https://docs.pmnd.rs/zustand/getting-started/introduction) or [jotai](https://jotai.org/)). Important to remember, many times context is used as the "golden tool" for props drilling, whereas in many scenarios you may satisfy your needs by [lifting the state up](https://reactjs.org/docs/lifting-state-up.html) or [a proper composition of components](https://reactjs.org/docs/context.html#before-you-use-context). Do not rush with context.
+
 - If your application is expected to have frequent updates that might affect performance, consider switching from runtime styling solutions ([Chakra UI](https://chakra-ui.com/), [emotion](https://emotion.sh/docs/introduction), [styled-components](https://styled-components.com/) that generate styles during runtime) to zero runtime styling solutions ([tailwind](https://tailwindcss.com/), [linaria](https://github.com/callstack/linaria), [vanilla-extract](https://github.com/seek-oss/vanilla-extract), [CSS modules](https://github.com/css-modules/css-modules) which generate styles during build time).
 
+### Children as the most basic optimization
+
+- Prop `children` is the most basic and easiest way to optimize your components. Applied properly, it eliminates a lot of unnecessary rerenders. Passed JSX, in the form of `children` prop, represents an isolated VDOM structure that does not need (and cannot) be re-rendered by its parent. Example below:
+
+```javascript
+// Not optimized example
+const App = () => <Counter />
+
+const Counter = () => {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div>
+      <button onClick={() => setCount((count) => count + 1)}>
+        count is {count}
+      </button>
+      <PureComponent/> // will rerender whenever "count" updates
+    </div>
+  )
+}
+
+const PureComponent = () => <p>Pure Component</p>
+
+// Optimized example
+const App = () => (
+  <Counter>
+    <PureComponent/>
+  </Counter>
+)
+
+const Counter = ({ children }) => {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div>
+      <button onClick={() => setCount((count) => count + 1)}>
+        count is {count}
+      </button>
+      {children} // won't rerender whenever "count" updates
+    </div>
+  )
+}
+
+const PureComponent = () => <p>Pure Component</p>
+```
+
 ### Image optimizations
 
 Consider lazy loading images that are not in the viewport.