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
In software that can change in many ways,
defaultValue is brittle. Once
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.