10 beginner mistakes React Developers do

I've been teaching React and Javascript for years now. Below are some beginner mistakes React developers do which could be avoided.

Not making these mistakes repeatedly will save you time and allows you to learn faster.

1. No Top Level return

Returning more than one element from a React Component or simply put NOT Wrapping Adjacent JSX elements in an enclosing tag.

Do this: Use a <div> or a react fragment as a top level return.

2. usage of var

If you are not sure about this, you certainly dont need var.

Do this: If you want to create a variable whose value will change, chose let otherwise stick to const.

3. Not looking at console warnings/errors

React is extremely good at providing details (& sometimes solution) when something is broken. Most of the time these details will be visible on the broken page while you are developing the application. Some errors or warnings (missing keys while working with arrays) get logged into developer console.

Do This: While you are working, Keep the developer tab/console open and keep an eye for such errors. It will save you time.

4. Naming Convention (Proper Casing)

Not using the right casing may not help the computer running the code or the user reading your code (let's say you work in some company).

Do this:

Component names - Should always be PascalCase (Ex: EmployeeList or EmployeeDetails or Login Or Header).
Constants you can use all either All Capitals (words separated by _) or simply follow the trend set in your company.

Ex: const MONTHS_IN_A_YEAR = 12;
Everything else should be camelCase (state variables, regular variables, function names).

5. Spelling mistakes

This is something which is simply unacceptable. Spelling mistakes in variable names are a huge turn off. Spelling mistakes which show up on the browser for your user, is a big no. Imagine paying for your product and seeing a spelling mistake. To add to that, some spelling mistakes can be extreme.

Do this: Use a spell checker extension in your IDE. This helps in checking for spelling mistakes automatically. Look for Code Spell Checker for VS Code or a similar extension for your favourite IDE.

6. Creating components outside the `src` folder

This one is for those who use Create React App. If you try to create a React component outside the src folder, webpack may not be very happy and your application could break. While you can still have a component outside src folder and get the application to work, its an overkill for a beginner to worry about. You have a lot of other things to learn.

Do this: Just make sure you create all your react components under src folder.

7. using events everywhere

When creating eventhandlers, the event is sent as an argument. If you dont need the event, you can skip it in the event handler function.

Do this: use the event argument only when its needed.

Example:


onChangeHandler(e){ // user typing into a textbox.
  setInput(e.target.value) // Correct, you need `e` here.
}

onClickHandler() { // you do not need `e` here
   setCounter((counter)=>counter+1)
}

8. Creating unnecessary states

Just because you need a value in your component, you don't have to keep it in a state. Go for a state variable only if you want to see UI change caused when this variable changes.

Do This: Create a let/const variable and store the value.

Ex:

const hours = 24;

9. Mutating State

Avoid mutating the state directly especially for non primitives (objects and arrays). It wont work for a lot of reasons.

Do this: Think of state as Immutable. If you want to update an array (add, remove or filter an item), create a copy of the existing state array, perform actions on the newly created array and then set the state by passing the newly created and now updated array to the state updater function.

Note: Non Primitive types are by default immutable. Be careful only while dealing with objects and arrays.


const add = (data) => {
  const newList = [...employees]; // beware of deep copies
  newList.push(data);
  setEmployees(newList)
}

10. using `useEffect` to implement logic related to user events.

Do not chose useEffect to Transform Data or to handle user event specific logic.

Go for useEffect as a last resort if the side effect you need to perform is not related to a user events or data transformation.

Do this: These can be done with event handlers or formatting/massaging the data before rendering.

Connect with me & say hello here

Until next time.