React Worst Practices — The Beginning

Wherever I Go, I see him :P

1. Using Logic Inside Render

Bad Practice
Good Practice

2. Polluting Render method using anonymous functions

Bad Practice
Good Practice

3. Using && to conditionally Render Component

Bad Practice
Good Practice

4. Nesting Ternary in Render

Bad Practice
Good Practice

5. Not Sorting Props

Bad Practice
Good Practice

6. Not destructuing props and state

Bad Practice
Good Practice

7. Not using useCallback, useMemo hooks and React.memo

Not Using React.memo(). Watch Component is rendered EveryTime count changes.
Watch Component only rendered once. Using React.memo().

8. Not Cleaning event listeners and timers

Bad Practice. Not clearing timers and event listeners.
Clearing Event listeners and timers.

9. Passing props one by one

Bad Practice. Not Destructuring Props.
Good Practice.

10. Using Index as a key

Demonstration of using index as key and id as key

12. Avoiding React Dev Tools

  1. By turning this option, you can check updates to the UI visually and prevent un-necessary render if needed before time.
Demonstration of React Dev Tools

13. Using inline CSS

14. रायता फैलाना

Can you find रायता in above code?
  1. No Import order is followed.
  2. Creating variables anywhere we wanted.
  3. Initializing hooks at random places
  4. Writing useEffect hools in b.w. code.
Follow any rule for how and where to write code.

15. divs everywhere

16. div as Button

No Role Specified
Role Specified.

🍺

--

--

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