React JS Bad Practices

Index

  1. Using Index as the key in the map function
  2. Polluting Render method by using Anonymous functions
  3. Using Nested Components
  4. Nesting Ternary Operator in Render
  5. Not Destructuring Props
  6. Prop Drilling
  7. Not cleaning up Event Listeners
  8. Using Inline CSS
  9. Using Divs everywhere

1. Using Index as the Key in the map() function

Problem

Example

<ul><li key={1}>Milk</li><li key={2}>Eggs</li><li key={3}>Food</li><li key={4}>Bread</li><li key={5}>Sausage</li></ul>;
<ul><li key={1}>Milk</li><li key={2}>Eggs</li><li key={3}>Food</li><li key={4}>Bread</li><li key={5}>Sausage</li><li key={6}>Butter</li></ul>;
<ul><li key={1}>Butter</li><li key={2}>Milk</li><li key={3}>Eggs</li><li key={4}>Food</li><li key={5}>Bread</li><li key={6}>Sausage</li></ul>;

Solution

<ul><li key={"1a"}>Milk</li><li key={"2b"}>Eggs</li><li key={"3c"}>Food</li><li key={"4d"}>Bread</li><li key={"5e"}>Sausage</li></ul>;

2. Polluting Render Method by using Anonymous Functions

import React from "react";const App = () => {const handleClick = () => {console.log("You Clicked???????");};return <button onClick={() => handleClick()}>Click me</button>;};export default App;

Problem

Solution

3. Nested Components

import React, { useState } from "react";const Main = () => {const [name, setName] = useState("Ateev");const Sub = () => {return <h1 className="p-5">Hello {name}, I am the child of Mr & Mrs Khana</h1>;};return (<><Sub /></>);};export default Main;

Problem

Solution

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ateev Duggal

Ateev Duggal

I am a front-end developer from India with over one year of experience in freelancing with skills like Git, HTML5, CSS3, Bootstrap 4&5, and React.