updated formation

Author: RVassili

src/examples/use-effect-1/ExampleUseEffect103.tsx

@@ -4,82 +4,41 @@ import cloneDeep from "lodash.clonedeep";
 import { useLog } from "../../commons/ExampleBloc";
 
 const SubComponent = ({
-  value,
-  setValue,
-  otherValue,
-  setOtherValue
+  parentValue,
+  setParentValue,
 }: {
-  value: number;
-  setValue: (newValue: number) => void;
-  otherValue: { str: string };
-  setOtherValue: (newValue: { str: string }) => void;
+  parentValue: { str: string };
+  setParentValue: (newValue: { str: string }) => void;
 }) => {
   const log = useLog();
-  const [state, setState] = React.useState<number>(value);
-  const [otherState, setOtherState] = React.useState<any>(otherValue);
+  const [state, setState] = React.useState<any>(parentValue);
   const [shouldSetSuperState, setShouldSetSuperState] = React.useState<boolean>(false);
 
   log("render");
 
-  React.useEffect(() => {
-    setState(value);
-  }, [value, setState]);
   React.useEffect(() => {
     log("use effect");
-    if (shouldSetSuperState) setOtherValue(otherValue);
-    else setOtherState(otherValue);
-  }, [otherValue, setOtherState, setOtherValue, shouldSetSuperState, log]);
+    if (shouldSetSuperState) setParentValue(state);
+    setState(parentValue);
+  }, [parentValue, setParentValue, state, setState, shouldSetSuperState, log]);
 
   return (
     <>
-      <pre>{JSON.stringify({ value, state, otherState, shouldSetSuperState }, null, 2)}</pre>
+      <pre>{JSON.stringify({ state, shouldSetSuperState }, null, 2)}</pre>
       <ul>
-        <li>
-          <ActionButton
-            label="Increment state"
-            onClick={() => {
-              setState(state => state + 1);
-            }}
-          />
-        </li>
-        <li>
-          <ActionButton
-            label="Increment super state"
-            onClick={() => {
-              setValue(value + 1);
-            }}
-          />
-        </li>
         <li>
           <ActionButton
             label="Change other state"
             onClick={() => {
-              setOtherState({ someProps: "zefzefz" });
-            }}
-          />
-        </li>
-        <li>
-          <ActionButton
-            label="Change super other state"
-            onClick={() => {
-              setOtherValue({ str: "zezfez" });
-            }}
-          />
-        </li>
-        <li>
-          <ActionButton
-            label="Reset super state"
-            onClick={() => {
-              setValue(0);
-              setOtherValue({ str: "" });
+              setState({ someProps: "zefzefz" });
             }}
           />
         </li>
         <li>
           <ActionButton
             label="Change state option"
             onClick={() => {
-              setShouldSetSuperState(state => !state);
+              setShouldSetSuperState((state) => !state);
             }}
           />
         </li>
@@ -89,17 +48,9 @@ const SubComponent = ({
 };
 
 const ExampleUseState106 = () => {
-  const [counter, setCounter] = React.useState<number>(0);
   const [str, setStr] = React.useState<{ str: string }>({ str: "" });
 
-  return (
-    <SubComponent
-      value={counter}
-      setValue={setCounter}
-      otherValue={cloneDeep(str)}
-      setOtherValue={setStr}
-    />
-  );
+  return <SubComponent parentValue={cloneDeep(str)} setParentValue={setStr} />;
 };
 
 export default ExampleUseState106;

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

@@ -14,10 +14,10 @@ const ExampleUseRef101 = () => {
       <ul>
         <li>
           <ActionButton
-            label="Do nothing ref-wise"
+            label="Log ref value"
             onClick={() => {
               /* NOOP */
-              log("Ref: ", { ref });
+              console.log("Ref: ", ref.current);
             }}
           />
         </li>

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

@@ -1,63 +1,27 @@
-import React from "react";
+import React, { useRef } 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 });
+  const ref = useRef<HTMLInputElement | null>(null);
 
   return (
     <>
-      <pre>Number outside MyComponent: {state}</pre>
-
-      <div>
-        <RenderOnceMyComponent value={state} />
-      </div>
-
+      <input ref={ref}></input>
       <ul>
         <li>
           <ActionButton
-            label="Do nothing state-wise"
+            label="Set input value"
             onClick={() => {
-              /* NOOP */
-            }}
-          />
-        </li>
-        <li>
-          <ActionButton
-            label="Increment"
-            onClick={() => {
-              setState(state + 1);
-            }}
-          />
-        </li>
-        <li>
-          <ActionButton
-            label="Reset to 0"
-            onClick={() => {
-              setState(0);
+              if (ref.current === null) {
+                return;
+              }
+
+              const str = prompt("Value?");
+              if (str === null) {
+                return;
+              }
+
+              ref.current.value = str;
             }}
           />
         </li>