Every Route Change Mounts and Unmounts a Component
You declare routes inside the Switch
component, the previous component is unmounted and the component with the new matching route is mounted.
If you need to persist some data across a route change, you need to declare it in the component which encapsulates the routes, or some other way of persisting data like using local storage
The Wrong State Syntax
Whenever you declare some state inside a class-based component, it’s always an object, Since state is an object, prevState
is also an object. But when you’re using functional components with React Hooks, the state can be an object or a non-object value.
Do not use hooks for class components
Starting with version 16.8.0, React introduced Hooks. They allow you to write better React code and make use of state and component life cycle methods inside functional components.
If you have a class-based component then you can’t use these hooks. You need to refactor your code to convert it to functional components.
Key Prop When Using the Array Map Method
Every time you’re using the array map
, you need to provide a unique key
prop. React uses this to identify which elements on the screen need to be re-rendered, so adding the key
prop helps you avoids unnecessary re-rendering in your app.