6 Reactjs Tips and Tricks

2025-01-20

react , web , development , tip , trick

keep your code clan by using self-closing tags.

❌ Bad: too verbose

<MyComponent></MyComponent>

✅ Good

2 - Prefer fragments

Avoid unnecessary <div> tags. Use <> fragment to keep the DOM clean.

❌ Bad

<div> <Header /> <Main /> </div>

✅ Good

<> <Header /> <Main /> </>

Destructure props for more readable and concise components.

❌ Bad

function TodoList(props) { return ( <p>{props.item}</p> ); }

✅ Good

function TodoList({item}) { return ( <p>{item}</p> ); }

Define default values directly within props for easy management

❌ Bad

function Card({ text, small }) { let btnText = text || "Click here"; let isSmall = small || false; ... }

✅ Good

function Card({ text = "Click here", small = false, }) { ... }

Pass string props without curly braces for cleaner syntax.

❌ Bad

<Button text={"Submit"} />

✅ Good

Keep components efficient by moving static data outside.

❌ Bad

function LevelSelectorComponent() { const LEVELS = ["Easy", "Medium", "Hard"]; return (...) }

✅ Good

const LEVELS = ["Easy", "Medium", "Hard"]; function LevelSelectorComponent() { return (...) }