Common mistake in React apps: Storing values in state that could be derived...
Common mistake in React apps: Storing values in state that could be derived from existing state. Doing so leads to manually trying to keep state values in sync. The code starts to look like old jQuery apps.
Instead, prefer calculating derived values in render.
Example: Don't store first, last, and full name in state. Store only first and last name. Derive full name by concatenating first and last name.
I just refactored a single component that had this issue. I deleted nearly 40% of the code: 360 -> 225 lines.