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 arrayUse 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 versionInstead, use the custom
SimpleForm
which has a sacrificial component to ignore the props.
fullWidth
is just used to make fields and inputs full widthThis 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 multipleProp types in RA enforce this, which have been overridden
Deprecations
Use
link
instead oflinkType
TextInput
rows
is nowminRows
andmaxRow
which is nice because it automatically expands instead of scrolling now