Red flags in a react codebase

🚩Functions named handleClick, handleSubmit

functions like <button onClick={handleClick}

- handleClick doesn’t explain what it does
- you lose colocation
- need new names for each callback

Inline callbacks can call multiple functions with good names

onClick={() => {
    analytics.event('this-button')
    openModal()
}js

🚩event.preventDefault()

This is javascript, and only runs once javascript loads

If you click a link or submit a form before that, preventDefault will not run

It’s a necessary tool for progressive enhancement, but this flag always makes me look closer for unexpected behavior

🚩useMemo

React devs are terrified of renders and often overuseMemo

- memoize things that you pass as props to components that may have expensive children
- it’s ok for leaf components to over-render

useMemo does not fix bugs, it just makes them happen less often

🚩Fetch inside useEffect

React code requires fetch to be in useEffect, but most people should be using a lib like react-query/swr for this

• the effect will run more often than you think
  - attempts to hook into the lifecycle of the fetch are usually buggy

🚩<div onClick/>

divs are not interactive elements and adding onClick requires implementing keyboard control, screen reader announcement, etc

This is almost never the right move, and anyone capable of doing it right (the new tweet button) isn’t going to be swayed by this article

🚩A “hooks” directory

A <ContextProvider /> and its useContext() hook belong together, not split into “components” and “hooks” directories

Sorting your codebase by what each function looks like means even small changes will span many directories

🚩CSS files

These are competing component systems
- CSS files let you reuse CSS
- React lets you reuse HTML/CSS/JS

A component’s styles belong near it and not in an external stylesheet

It’s good to have one top level CSS file that defines the design axioms for the project

🚩Icon library in package.json

I hope this will be a solved problem one day, but icon libraries can have thousands of components

and it’s super easy to end up with them all in your bundle

they also often break auto-imports by exporting components named after every noun

There are many more , but if you come across these points in your codebase , be aware of the problems you will be facing.

Thank you for reading! 😸