Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove componentWillReceiveProps from Form.jsx #2010

Closed
wants to merge 11 commits into from
Closed

Remove componentWillReceiveProps from Form.jsx #2010

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a9d8e05
refactor: form.jsx is no longer using componentwillreceiveprops
Aug 22, 2020
2d35019
return null from getDerivedStateFromProps as default
Aug 26, 2020
33aee98
change deepEquals to shallow equals in getDerivedStateFromProps
Aug 31, 2020
4532e45
checking each key for shallow changes in getDerivedStateFromProps
Aug 31, 2020
f26788b
Merge remote-tracking branch 'origin/master' into no-componentwillrec…
Apr 17, 2021
28c697c
Merge branch 'master' into no-componentwillreceiveprops
Apr 17, 2021
092aab0
Merge branch 'master' into no-componentwillreceiveprops
Apr 18, 2021
ed89981
Merge branch 'master' into no-componentwillreceiveprops
jimmycallin May 2, 2021
181f0da
Merge remote-tracking branch 'origin/master' into no-componentwillrec…
jimmycallin Feb 27, 2022
a40ce16
Revert change for deepEquals function
jimmycallin Feb 27, 2022
ed618c9
moved util functions back as static functions to Form
jimmycallin Feb 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/antd/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

163 changes: 28 additions & 135 deletions packages/core/src/components/Form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,23 @@ import _isEmpty from "lodash/isEmpty";

import { default as DefaultErrorList } from "./ErrorList";
import {
getDefaultFormState,
retrieveSchema,
shouldRender,
toIdSchema,
getDefaultRegistry,
deepEquals,
toPathSchema,
isObject,
getRegistry,
validate,
getStateFromProps,
} from "../utils";
import validateFormData, { toErrorList } from "../validate";
import { toErrorList } from "../validate";
import { mergeObjects } from "../utils";

function handleChange(props, state) {
const { lastProps, ...formState } = state;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Figure out -- why do we need lastProps?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On line 62 we need to compare prop changes to determine if the consumer has updated their props.

If the consumer has updated the props, we update the internal state based on the props.

We could previously do this in componentWillReceiveProps since that method supports both viewing previous and new props. But since getDerivedStateFromProps only shows the new prop updates, we need to store the old props in the state.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And the reason why we cannot always derive state from props, is due to us supporting the mixed controlled/uncontrolled behavior we discussed on our last meeting this Friday.

props.onChange(formState);
}

export default class Form extends Component {
static defaultProps = {
uiSchema: {},
Expand All @@ -31,134 +36,38 @@ export default class Form extends Component {

constructor(props) {
super(props);
this.state = this.getStateFromProps(props, props.formData);
this.state = getStateFromProps(props, props.formData);
}

formElement = null;

componentDidMount() {
if (
this.props.onChange &&
!deepEquals(this.state.formData, this.props.formData)
) {
this.props.onChange(this.state);
handleChange(this.props, this.state);
}
this.formElement = null;
}

UNSAFE_componentWillReceiveProps(nextProps) {
const nextState = this.getStateFromProps(nextProps, nextProps.formData);
componentDidUpdate(prevProps) {
if (
!deepEquals(nextState.formData, nextProps.formData) &&
!deepEquals(nextState.formData, this.state.formData) &&
this.props.onChange
this.props.onChange &&
!deepEquals(this.state.formData, this.props.formData)
) {
this.props.onChange(nextState);
handleChange(this.props, this.state);
}
this.setState(nextState);
}

getStateFromProps(props, inputFormData) {
const state = this.state || {};
const schema = "schema" in props ? props.schema : this.props.schema;
const uiSchema = "uiSchema" in props ? props.uiSchema : this.props.uiSchema;
const edit = typeof inputFormData !== "undefined";
const liveValidate =
"liveValidate" in props ? props.liveValidate : this.props.liveValidate;
const mustValidate = edit && !props.noValidate && liveValidate;
const rootSchema = schema;
const formData = getDefaultFormState(schema, inputFormData, rootSchema);
const retrievedSchema = retrieveSchema(schema, rootSchema, formData);
const customFormats = props.customFormats;
const additionalMetaSchemas = props.additionalMetaSchemas;

const getCurrentErrors = () => {
if (props.noValidate) {
return { errors: [], errorSchema: {} };
} else if (!props.liveValidate) {
return {
errors: state.schemaValidationErrors || [],
errorSchema: state.schemaValidationErrorSchema || {},
};
}
return {
errors: state.errors || [],
errorSchema: state.errorSchema || {},
};
};

let errors,
errorSchema,
schemaValidationErrors,
schemaValidationErrorSchema;
if (mustValidate) {
const schemaValidation = this.validate(
formData,
schema,
additionalMetaSchemas,
customFormats
);
errors = schemaValidation.errors;
errorSchema = schemaValidation.errorSchema;
schemaValidationErrors = errors;
schemaValidationErrorSchema = errorSchema;
} else {
const currentErrors = getCurrentErrors();
errors = currentErrors.errors;
errorSchema = currentErrors.errorSchema;
schemaValidationErrors = state.schemaValidationErrors;
schemaValidationErrorSchema = state.schemaValidationErrorSchema;
}
if (props.extraErrors) {
errorSchema = mergeObjects(
errorSchema,
props.extraErrors,
!!"concat arrays"
);
errors = toErrorList(errorSchema);
}
const idSchema = toIdSchema(
retrievedSchema,
uiSchema["ui:rootFieldId"],
rootSchema,
formData,
props.idPrefix
);
const nextState = {
schema,
uiSchema,
idSchema,
formData,
edit,
errors,
errorSchema,
additionalMetaSchemas,
};
if (schemaValidationErrors) {
nextState.schemaValidationErrors = schemaValidationErrors;
nextState.schemaValidationErrorSchema = schemaValidationErrorSchema;
static getDerivedStateFromProps(props, state) {
if (!deepEquals(state.lastProps, props)) {
Copy link

@RoboPhred RoboPhred Aug 31, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why the reliance on deep equals for comparing property references? Does RJSF really want to support mutating object references? Such an action will not cause react to re-render the component anyway, so supporting this seems to be just a big performance sink.

We are working with very large forms (several hundered fields), and this area has been a pain point for us. I have an outstanding question about the issue here.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @RoboPhred, from my view there is really no reason to use the deepEquals. I didn't spend any thought in reevaluating this, since I just wanted to have a PR with no breaking changes. I tried to replace deepEquals with shallow equals, and it didn't seem to break any tests, so I just pushed this change. We'll see if it passes review. :)

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whoops, that change might not work, as you will always receive a new core props reference each time react re-renders, meaning it will try to make a new state every render. You should compare each individual property to its previous value.

You might be able to get away with something like:

const keys = Object.keys(props);
if (keys.some(key => state.lastProps[key] != props[key]) {
  // regenerate state
}

I am a bit worried about adding or removing properties, but I /think/ that if you have an undefined property passed in react, react will actively create that property and set its value as undefined, meaning the property will still show up in Object.keys(). I don't think there are any cases where we might have a property defined in lastProps but not defined in props.

For reference, you can see my previous attempt at this here. In that case, I individually checked the props by name, but I think we can get away with a bulk scan over the new properties.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, good catch. I added an additional check that checked the length of the number of properties, which I think will fix the case of any removed properties not triggering an onChange event. Not sure why the Netlify CI tests are breaking, but I think that's unrelated.

return getStateFromProps(props, props.formData, state);
}
return nextState;
}

shouldComponentUpdate(nextProps, nextState) {
return shouldRender(this, nextProps, nextState);
}

validate(
formData,
schema = this.props.schema,
additionalMetaSchemas = this.props.additionalMetaSchemas,
customFormats = this.props.customFormats
) {
const { validate, transformErrors } = this.props;
const { rootSchema } = this.getRegistry();
const resolvedSchema = retrieveSchema(schema, rootSchema, formData);
return validateFormData(
formData,
resolvedSchema,
validate,
transformErrors,
additionalMetaSchemas,
customFormats
);
}

renderErrors() {
const { errors, errorSchema, schema, uiSchema } = this.state;
const { ErrorList, showErrorList, formContext } = this.props;
Expand Down Expand Up @@ -222,7 +131,7 @@ export default class Form extends Component {

onChange = (formData, newErrorSchema) => {
if (isObject(formData) || Array.isArray(formData)) {
const newState = this.getStateFromProps(this.props, formData);
const newState = getStateFromProps(this.props, formData, this.state);
formData = newState.formData;
}
const mustValidate = !this.props.noValidate && this.props.liveValidate;
Expand Down Expand Up @@ -251,7 +160,7 @@ export default class Form extends Component {
}

if (mustValidate) {
let schemaValidation = this.validate(newFormData);
let schemaValidation = validate(newFormData, this.props);
let errors = schemaValidation.errors;
let errorSchema = schemaValidation.errorSchema;
const schemaValidationErrors = errors;
Expand Down Expand Up @@ -287,7 +196,7 @@ export default class Form extends Component {
}
this.setState(
state,
() => this.props.onChange && this.props.onChange(this.state)
() => this.props.onChange && handleChange(this.props, this.state)
);
};

Expand Down Expand Up @@ -331,7 +240,7 @@ export default class Form extends Component {
}

if (!this.props.noValidate) {
let schemaValidation = this.validate(newFormData);
let schemaValidation = validate(newFormData, this.props);
let errors = schemaValidation.errors;
let errorSchema = schemaValidation.errorSchema;
const schemaValidationErrors = errors;
Expand Down Expand Up @@ -387,22 +296,6 @@ export default class Form extends Component {
);
};

getRegistry() {
// For BC, accept passed SchemaField and TitleField props and pass them to
// the "fields" registry one.
const { fields, widgets } = getDefaultRegistry();
return {
fields: { ...fields, ...this.props.fields },
widgets: { ...widgets, ...this.props.widgets },
ArrayFieldTemplate: this.props.ArrayFieldTemplate,
ObjectFieldTemplate: this.props.ObjectFieldTemplate,
FieldTemplate: this.props.FieldTemplate,
definitions: this.props.schema.definitions || {},
rootSchema: this.props.schema,
formContext: this.props.formContext || {},
};
}

submit() {
if (this.formElement) {
this.formElement.dispatchEvent(
Expand Down Expand Up @@ -434,7 +327,7 @@ export default class Form extends Component {
} = this.props;

const { schema, uiSchema, formData, errorSchema, idSchema } = this.state;
const registry = this.getRegistry();
const registry = getRegistry(this.props);
const _SchemaField = registry.fields.SchemaField;
const FormTag = tagName ? tagName : "form";
if (deprecatedAutocomplete) {
Expand Down
114 changes: 113 additions & 1 deletion packages/core/src/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from "react";
import * as ReactIs from "react-is";
import mergeAllOf from "json-schema-merge-allof";
import fill from "core-js/library/fn/array/fill";
import validateFormData, { isValid } from "./validate";
import validateFormData, { isValid, toErrorList } from "./validate";
import union from "lodash/union";
import jsonpointer from "jsonpointer";

Expand Down Expand Up @@ -1243,3 +1243,115 @@ export function schemaRequiresTrueValue(schema) {

return false;
}

export function getRegistry(props) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should move all of these new functions in utils.js to just Form.js (because they're quite Form-specific)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we just make them static functions (such as static Registry) within Form? This will make it easier to compare changes in the PR.

const { fields, widgets } = getDefaultRegistry();
return {
fields: { ...fields, ...props.fields },
widgets: { ...widgets, ...props.widgets },
ArrayFieldTemplate: props.ArrayFieldTemplate,
ObjectFieldTemplate: props.ObjectFieldTemplate,
FieldTemplate: props.FieldTemplate,
definitions: props.schema.definitions || {},
rootSchema: props.schema,
formContext: props.formContext || {},
};
}

export function validate(
formData,
props,
schema = props.schema,
additionalMetaSchemas = props.additionalMetaSchemas,
customFormats = props.customFormats
) {
const { validate, transformErrors } = props;
const { rootSchema } = getRegistry(props);
const resolvedSchema = retrieveSchema(schema, rootSchema, formData);
return validateFormData(
formData,
resolvedSchema,
validate,
transformErrors,
additionalMetaSchemas,
customFormats
);
}

export function getStateFromProps(props, inputFormData, state = {}) {
const edit = typeof inputFormData !== "undefined";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should figure out -- why does this omit several lines from the original getStateFromProps function?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the lines omitted are mostly just variable declarations that I pick up directly from the prop object instead

const mustValidate = edit && !props.noValidate && props.liveValidate;
const formData = getDefaultFormState(
props.schema,
inputFormData,
props.schema
);
const retrievedSchema = retrieveSchema(props.schema, props.schema, formData);

const getCurrentErrors = () => {
if (props.noValidate) {
return { errors: [], errorSchema: {} };
} else if (!props.liveValidate) {
return {
errors: state.schemaValidationErrors || [],
errorSchema: state.schemaValidationErrorSchema || {},
};
}
return {
errors: state.errors || [],
errorSchema: state.errorSchema || {},
};
};

let errors, errorSchema, schemaValidationErrors, schemaValidationErrorSchema;
if (mustValidate) {
const schemaValidation = validate(
formData,
props,
props.schema,
props.additionalMetaSchemas,
props.customFormats
);
errors = schemaValidation.errors;
errorSchema = schemaValidation.errorSchema;
schemaValidationErrors = errors;
schemaValidationErrorSchema = errorSchema;
} else {
const currentErrors = getCurrentErrors();
errors = currentErrors.errors;
errorSchema = currentErrors.errorSchema;
schemaValidationErrors = state.schemaValidationErrors;
schemaValidationErrorSchema = state.schemaValidationErrorSchema;
}
if (props.extraErrors) {
errorSchema = mergeObjects(
errorSchema,
props.extraErrors,
!!"concat arrays"
);
errors = toErrorList(errorSchema);
}
const idSchema = toIdSchema(
retrievedSchema,
props.uiSchema["ui:rootFieldId"],
props.schema,
formData,
props.idPrefix
);
const nextState = {
schema: props.schema,
uiSchema: props.uiSchema,
idSchema,
formData,
edit,
errors,
errorSchema,
additionalMetaSchemas: props.additionalMetaSchemas,
lastProps: props,
};
if (schemaValidationErrors) {
nextState.schemaValidationErrors = schemaValidationErrors;
nextState.schemaValidationErrorSchema = schemaValidationErrorSchema;
}
return nextState;
}