Some mistakes made by beginner developers with React

ahmedSoua
2 min readJun 4, 2021

--

Photo by Christina @ wocintechchat.com on Unsplash

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.

Thanks for reading!

--

--