wip: split into self and prop driven versions

Author: craig-waite

fast-context-generic-extended/public/DevToolsImage.png

@@ -15,7 +15,10 @@ function App() {
   return (
     <AppFastContextProvider>
       <div className="container">
-        <h1>App</h1>
+        <img src="../public/DevToolsImage.png" style={{float: 'right', width: '350px'}} alt="Dev Tools"/>
+        <h1>App (NO RE-RENDERS)</h1>
+        <p>The App's Fast Context is created and exported here, but could be created in any file.</p>
+        <p>Switch on the re-render highlight function (see image) in dev tools to see when re-renders happen.</p>
         <MainPage />
       </div>
     </AppFastContextProvider>

fast-context-generic-extended/src/App.tsx

@@ -19,7 +19,6 @@ export default function createFastContext<FastContext>(initialState: FastContext
     const subscribers = useRef(new Set<() => void>());
 
     const set = useCallback((value: Partial<FastContext>) => {
-      console.log('set', value);
       store.current = { ...store.current, ...value };
       subscribers.current.forEach((callback) => callback());
     }, []);

fast-context-generic-extended/src/app/createFastContext.tsx

@@ -1,13 +1,24 @@
-import FormContainer from "./FormContainer";
-import DisplayContainer from "./DisplayContainer";
+import { PropDrivenDisplayContainer, SelfDrivenDisplayContainer } from "./DisplayContainer";
+import { PropDrivenFormContainer, SelfDrivenFormContainer } from "./FormContainer";
 
-export default function ContentContainer() {
-  console.log(`Content Rendering`)
+export function PropDrivenContentContainer() {
+  console.log(`Prop Driven Content Rendering`)
   return (
     <div className="container">
-      <h3>ContentContainer</h3>
-      <FormContainer />
-      <DisplayContainer />
+      <h3>'Prop Driven' Content Container (NO RE-RENDERS)</h3>
+      <PropDrivenFormContainer />
+      <PropDrivenDisplayContainer />
+    </div>
+  );
+};
+
+export function SelfDrivenContentContainer() {
+  console.log(`Self Driven Content Rendering`)
+  return (
+    <div className="container">
+      <h3>'Self Driven' Content Container (NO RE-RENDERS)</h3>
+      <SelfDrivenFormContainer />
+      <SelfDrivenDisplayContainer />
     </div>
   );
 };

fast-context-generic-extended/src/components/ContentContainer.tsx

@@ -1,13 +1,27 @@
+import { useAppFastContextField } from "../App";
+
 type Props = {
+  fieldName?: string;
   label?: string;
-  value: string;
+  value?: string;
 };
-export default function Display({label, value}: Readonly<Props>) {
-  console.log(`${label} display change`)
+export function PropDrivenDisplay({label, value}: Readonly<Props>) {
+  console.log(`Prop Driven ${label} display rendering`)
   return (
     <div className="value">
       {label ? <label>{label} : </label> : null}
       <input value={value} readOnly style={{backgroundColor: "#eee", cursor: 'auto', border: 0}}/>
     </div>
   );
 };
+
+export function SelfDrivenDisplay({ fieldName, label }: Readonly<Props>) {
+  console.log(`Self Driven ${label} display rendering`)
+  const [value] = useAppFastContextField(fieldName as string);
+  return (
+    <div className="value">
+      {label ? <label>{label} : </label> : null}
+      <input value={value as string} readOnly style={{backgroundColor: "#eee", cursor: 'auto', border: 0}}/>
+    </div>
+  );
+};

fast-context-generic-extended/src/components/Display.tsx

@@ -1,15 +1,26 @@
 import { useAppFastContextField } from "../App";
-import Display from "./Display";
+import { PropDrivenDisplay, SelfDrivenDisplay } from "./Display";
 
-export default function DisplayContainer() {
-  console.log(`Display Rendering`)
+export function PropDrivenDisplayContainer() {
+  console.log(`Prop Driven Display Rendering`)
   const [first] = useAppFastContextField('first');
   const [last] = useAppFastContextField('last');
   return (
     <div className="container">
-      <h4>DisplayContainer</h4>
-        <Display label="First Name" value={first as string} />
-        <Display label="Last Name" value={last as string} />
+      <h4>'Prop Driven' Display (Container AND children re-render on field changes)</h4>
+        <PropDrivenDisplay label="First Name" value={first as string} />
+        <PropDrivenDisplay label="Last Name" value={last as string} />
+    </div>
+  );
+};
+
+export function SelfDrivenDisplayContainer() {
+  console.log(`Self Driven Display Rendering`)
+  return (
+    <div className="container">
+      <h4>'Self Driven' Display (NO RE-RENDERS - only children re-render on field changes)</h4>
+        <SelfDrivenDisplay fieldName="first" label="First Name" />
+        <SelfDrivenDisplay fieldName="last" label="Last Name" />
     </div>
   );
 };

fast-context-generic-extended/src/components/DisplayContainer.tsx

@@ -1,15 +1,26 @@
 import { useAppFastContextField } from "../App";
-import TextInput from "./TextInput";
+import { FormDrivenTextInput, SelfDrivenTextInput } from "./TextInput";
 
-export default function FormContainer() {
-  console.log(`Form Rendering`)
+export function PropDrivenFormContainer() {
+  console.log(`Prop Driven Form Rendering`)
   const [firstName, setFirstName] = useAppFastContextField("first");
   const [lastName, setLastName] = useAppFastContextField("last");
   return (
     <div className="container">
-      <h4>FormContainer</h4>
-      <TextInput value={firstName as string} label='First Name' onChange={setFirstName}/>
-      <TextInput value={lastName as string} label='Last Name' onChange={setLastName} />
+      <h4>'Prop Driven' Input Form (Form AND children re-render on field changes)</h4>
+      <FormDrivenTextInput value={firstName as string} label='First Name' onChange={setFirstName}/>
+      <FormDrivenTextInput value={lastName as string} label='Last Name' onChange={setLastName} />
+    </div>
+  );
+};
+
+export function SelfDrivenFormContainer() {
+  console.log(`Self Driven Form Rendering`)
+  return (
+    <div className="container">
+      <h4>'Self Driven' Input Form (NO RE-RENDERS - only children re-render on field changes)</h4>
+      <SelfDrivenTextInput fieldName="first" label='First Name'/>
+      <SelfDrivenTextInput fieldName="last" label='Last Name'/>
     </div>
   );
 };

fast-context-generic-extended/src/components/FormContainer.tsx

@@ -1,9 +1,13 @@
+import { useAppFastContextField } from "../App";
+
 type Props = {
+  fieldName?: string;
   label?: string;
-  value: string;
-  onChange: (value: string) => void;
+  value?: string;
+  onChange?: (value: string) => void;
 };
-export default function TextInput( { label = '', value, onChange}: Readonly<Props> ) {
+export function FormDrivenTextInput( { label = '', value, onChange = (v) => {}}: Readonly<Props> ) {
+  console.log(`Prop Driven ${label} input rendering`)
   return (
     <div className="field">
       {label ? <label>{label} : </label> : null}
@@ -14,3 +18,18 @@ export default function TextInput( { label = '', value, onChange}: Readonly<Prop
     </div>
   );
 };
+
+
+export function SelfDrivenTextInput( { fieldName, label }: Readonly<Props> ) {
+  console.log(`Self Driven ${label} input rendering`)
+  const [value, setValue] = useAppFastContextField(fieldName as string);
+  return (
+    <div className="field">
+      {label ? <label>{label} : </label> : null}
+      <input
+        value={value as string}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </div>
+  );
+};

fast-context-generic-extended/src/components/TextInput.tsx

@@ -1,12 +1,14 @@
-import ContentContainer from "../components/ContentContainer";
-
+import { PropDrivenContentContainer, SelfDrivenContentContainer } from "../components/ContentContainer";
 
 export default function MainPage() {
   console.log(`Page Rendering`)
   return (
       <div className="container">
-        <h2>Page</h2>
-        <ContentContainer />
+        <h2>Page (NO RE-RENDERS)</h2>
+        <div style={{display: 'flex', justifyContent: 'space-around', margin: '1em'}}>
+          <PropDrivenContentContainer />
+          <SelfDrivenContentContainer />
+        </div>
       </div>
   );
 }