React Anti-Pattern: defaultValue
The use of defaultValue
isn't strictly an anti-pattern, as with everything it's context dependent. In the context of a small one form react component doing something simple I'd say defaultValue
is fine. This is React in-the-small.
React in-the-large or in-the-massive is different. In large applications
things change in unforseen ways. In large applications there are explicit or
implicit frameworks that are upstream from your component and will affect the
operation of your component. React-in-the-large will create multiple entry
points to your component. Sometimes its history.push
and sometimes its good
ol' Page Refresh. The state of your application will be different in both
those cases.
In software that can change in many ways, defaultValue
is brittle. Once
rendered, an input
with defaultValue
is completely out of React's hands.
The value of the input cannot be changed when new information becomes
available. You can change the value of the input with DOM functions, but then
you're not using React.
Outside of using a React form abstraction value
is much more adaptable than defaultValue
. It's more work to setup and maybe harder to get right initially, but far more likely to suit your needs down the road.