Merge pull request #3577 from marmelab/form-perf

[RFR] Improve form performance
marmelab · Aug 23, 2019 · 13d3027 · 13d3027
2 parents bcc8772 + 96aa93b
commit 13d3027
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/examples/simple/src/posts/PostCreate.js b/examples/simple/src/posts/PostCreate.js
@@ -20,7 +20,7 @@ import {
     useRedirect,
     useNotify,
 } from 'react-admin'; // eslint-disable-line import/no-unresolved
-import { useFormState } from 'react-final-form';
+import { useFormState, FormSpy } from 'react-final-form';
 
 const SaveWithNoteButton = props => {
     const [create] = useCreate('posts');
@@ -128,17 +128,17 @@ const PostCreate = ({ permissions, ...props }) => {
                 <TextInput autoFocus source="title" />
                 <TextInput source="teaser" fullWidth={true} multiline={true} />
                 <RichTextInput source="body" validate={required()} />
-                <FormDataConsumer>
-                    {({ formData, ...rest }) =>
-                        formData.title && (
+                <FormSpy subscription={{ values: true }}>
+                    {({ values }) =>
+                        values.title ? (
                             <NumberInput
                                 source="average_note"
                                 defaultValue={5}
-                                {...rest}
                             />
-                        )
+                        ) : null
                     }
-                </FormDataConsumer>
+                </FormSpy>
+
                 <DateInput
                     source="published_at"
                     defaultValue={dateDefaultValue}

diff --git a/packages/ra-ui-materialui/src/form/SimpleForm.js b/packages/ra-ui-materialui/src/form/SimpleForm.js
@@ -41,6 +41,7 @@ const SimpleForm = ({ initialValues, ...props }) => {
             mutators={{ ...arrayMutators }}
             keepDirtyOnReinitialize
             destroyOnUnregister
+            subscription={defaultSubscription}
             {...props}
             render={({ submitting, ...formProps }) => (
                 <SimpleFormView
@@ -55,6 +56,13 @@ const SimpleForm = ({ initialValues, ...props }) => {
     );
 };
 
+const defaultSubscription = {
+    submitting: true,
+    pristine: true,
+    valid: true,
+    invalid: true,
+};
+
 export default SimpleForm;
 
 const SimpleFormView = ({

diff --git a/packages/ra-ui-materialui/src/form/TabbedForm.js b/packages/ra-ui-materialui/src/form/TabbedForm.js
@@ -50,6 +50,7 @@ const TabbedForm = ({ initialValues, ...props }) => {
             setRedirect={setRedirect}
             keepDirtyOnReinitialize
             destroyOnUnregister
+            subscription={defaultSubscription}
             {...props}
             render={({ submitting, ...formProps }) => (
                 <TabbedFormView
@@ -64,6 +65,13 @@ const TabbedForm = ({ initialValues, ...props }) => {
     );
 };
 
+const defaultSubscription = {
+    submitting: true,
+    pristine: true,
+    valid: true,
+    invalid: true,
+};
+
 export default withRouter(TabbedForm);
 
 export const TabbedFormView = ({