useRef103

Author: HenriJ

src/App.css

@@ -8,17 +8,6 @@
   pointer-events: none;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
 .App-link {
   color: #61dafb;
 }

src/App.tsx

@@ -46,7 +46,7 @@ const App: React.FC = () => {
           <h4>Examples:</h4>
           <ul>
             {examples.map(example => (
-              <li style={{}}>
+              <li key={example.title} style={{}}>
                 <a
                   href={`#${genId(example.title)}`}
                   style={{ textDecoration: "none", color: "#61dafb" }}

src/commons/ExampleBloc/index.tsx

@@ -109,7 +109,7 @@ const ComponentAndText = ({
         right: 0
       }}
     >
-      <Preface>{preface}</Preface>
+      {preface && <Preface>{preface}</Preface>}
       <div
         style={{
           padding: 10,
@@ -121,7 +121,7 @@ const ComponentAndText = ({
       >
         {children}
       </div>
-      <Explanation>{explanation}</Explanation>
+      {explanation && <Explanation>{explanation}</Explanation>}
     </div>
   );
 };

src/examples/use-ref-1/ExampleUseRef103.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import ActionButton from "../../commons/ActionButton";
+import { useLog } from "../../commons/ExampleBloc";
+
+const MyComponent = ({ value }: { value: number }) => {
+  return <pre>Number inside MyComponent: {value}</pre>;
+};
+
+function renderOnce<P extends object>(
+  Component: React.ComponentType<P>
+): React.FC<P> {
+  return function HocComponent(props: P) {
+    const ref = React.useRef<React.ReactElement | null>(null);
+
+    if (ref.current === null) {
+      ref.current = <Component {...props} />;
+    }
+
+    return ref.current ? ref.current : null;
+  };
+}
+
+const RenderOnceMyComponent = renderOnce(MyComponent);
+
+const ExampleUseRef103 = () => {
+  const log = useLog();
+
+  const [state, setState] = React.useState<number>(0);
+  log("virtual-render", { state });
+
+  return (
+    <>
+      <pre>Number outside MyComponent: {state}</pre>
+
+      <div>
+        <RenderOnceMyComponent value={state} />
+      </div>
+
+      <ul>
+        <li>
+          <ActionButton
+            label="Do nothing state-wise"
+            onClick={() => {
+              /* NOOP */
+            }}
+          />
+        </li>
+        <li>
+          <ActionButton
+            label="Increment"
+            onClick={() => {
+              setState(state + 1);
+            }}
+          />
+        </li>
+        <li>
+          <ActionButton
+            label="Reset to 0"
+            onClick={() => {
+              setState(0);
+            }}
+          />
+        </li>
+      </ul>
+    </>
+  );
+};
+
+export default ExampleUseRef103;

src/examples/use-ref-1/index.tsx

@@ -2,10 +2,15 @@
 import ExampleUseRef101Code from "!raw-loader!./ExampleUseRef101";
 /* eslint import/no-webpack-loader-syntax: off */
 import ExampleUseRef102Code from "!raw-loader!./ExampleUseRef102";
+/* eslint import/no-webpack-loader-syntax: off */
+import ExampleUseRef103Code from "!raw-loader!./ExampleUseRef103";
 import React from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import highlightStyle from "react-syntax-highlighter/dist/esm/styles/prism/tomorrow";
 import { IExample } from "../../commons/types";
 import ExampleUseRef101 from "./ExampleUseRef101";
 import ExampleUseRef102 from "./ExampleUseRef102";
+import ExampleUseRef103 from "./ExampleUseRef103";
 
 const examples: IExample[] = [
   {
@@ -40,7 +45,28 @@ const examples: IExample[] = [
         a re-render when called. This way, we are able to display the content of
         the ref.
       </>
+    ),
+    explanation: (
+      <>
+        Exercise for the reader: build a HOC (Higher Order Component) that mount
+        a component once and will never trigger a new render.
+        <br />
+        It should look like this:
+        <SyntaxHighlighter
+          customStyle={{}}
+          language="typescript"
+          style={highlightStyle}
+        >
+          const RenderOnceMyComponent = renderOnce(MyComponent);
+        </SyntaxHighlighter>
+      </>
     )
+  },
+  {
+    title: "useRef 103",
+    Component: ExampleUseRef103,
+    code: ExampleUseRef103Code,
+    preface: <>Solution to the exercise</>
   }
 ];