React warnings

List of things to watch out for to avoid React logging a console warning.

General

  • Limit prop passing where possible. RA and MUI will pass down unknown props to native HTML components, which React will warn about if they’re camel cased since React doesn’t recognize what to do with it

    • Fully lowercase might get ignored, still should be avoided

  • key should be used anywhere you have components in an array

    • Use it when you’re mapping values into components, or when you have a static array of elements

    • eslint seems to miss flagging this when there’s a condition involved, you’ll still get a console warning

    • Avoid using index and prefer using an id where available, since this will optimize re-rendering when the array shifts around. This may be ignored if you have no other option

    • Watch for duplicate keys, a console warning will be logged if that happens

  • disabled must be a boolean. A truthy value like a string or number doesn’t cut it.

    • Sometimes we check for an id or a length of an array, use != null or !! to ensure it's a boolean

React Admin

  • SimpleForm pollutes the props of it’s children by design. Inputs are normally supposed to be direct children of the form, but now that it partially uses contexts, that behaviour is still there for backwards compatibility until the next major version

    • Instead, use the custom SimpleForm which has a sacrificial component to ignore the props.

  • fullWidth is just used to make fields and inputs full width

    • This isn’t recognized by any other RA component, so it can typically be cleaned up where spotted

    • MUI does have some components that recognize it for different uses, like Dialog

  • sort normally only expects a single property, but we’ve customized rest client to handle multiple properties since our API handles multiple

    • Prop types in RA enforce this, which have been overridden

Deprecations

  • Use link instead of linkType

  • TextInput rows is now minRows and maxRow which is nice because it automatically expands instead of scrolling now