WIP.

Author: DovydasNavickas

src/app.scss

@@ -43,12 +43,20 @@ body,
 .store,
 .store-result {
     padding: 10px;
+    border: 1px solid lightgrey;
 }
 
 .forms {
     flex: 1 0 auto;
     font-family: "Open Sans", sans-serif;
     font-size: 16px;
+    padding: 10px 20px;
+    width: 15%;
+
+    label,
+    label > * {
+        display: block;
+    }
 
     input {
         font-size: 16px;
@@ -74,17 +82,13 @@ body,
 }
 
 .store {
-    flex: ą 0 auto;
+    width: 35%;
     font-family: "Source Code Pro", monospace;
     font-size: 14px;
 }
 
 .store-result {
-    flex: 3 0 auto;
+    width: 40%;
     font-family: "Source Code Pro", monospace;
     font-size: 14px;
 }
-
-label > * {
-    display: block;
-}

src/components/text-field.tsx

@@ -23,7 +23,11 @@ function useFieldId(props: Pick<TextFieldProps, "name">): string {
     return `${groupId}${SEPARATOR}${props.name}`;
 }
 
-function useRegisterField(fieldId: string, props: TextFieldProps): void {
+function useRegisterField(
+    fieldId: string,
+    props: TextFieldProps,
+    updateHandler: () => void
+): void {
     useEffect(() => {
         const { store } = useContext(GroupContext);
 
@@ -37,6 +41,15 @@ function useRegisterField(fieldId: string, props: TextFieldProps): void {
         }
 
         store.registerField(fieldId, props.name, defaultValue, initialValue);
+
+        store.addListener(updateHandler);
+
+        return () => {
+            // First, remove listener to not get any more updates.
+            store.removeListener(updateHandler);
+            // Then, unregister field.
+            store.unregisterField(fieldId);
+        };
     }, []);
 }