7 React Patterns That Made Me Code Smarter, Not Harder

 

It’s 4 AM. I’m knee-deep in spaghetti code. My useEffect dependencies are screaming, the UI flickers like a cheap horror movie, and some mystery re-render is haunting my app every time I breathe.

Classic React chaos. Ever been there?

I was a decent developer. But React humbled me. Hard.

Turns out, knowing useState And slapping on some JSX doesn’t mean you know what the hell you’re doing. It means you started. But to ship maintainable, scalable apps? You need patterns. Real ones.

Here are 7 React patterns that slapped sense into me — and might just save your sanity too.

Edited by me

1. The “Component as Function, Not Dumpster” Pattern

You know what I’m talking about.

That one component that does everything. Fetches data, renders UI, handles logic, scrolls the page, makes your coffee…

Stop. Please.

A component should do one thing well, not ten things poorly.

The Fix: Extract. Abstract. Repeat.

// Bad
function UserProfile() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetchUser().then(setData);
  }, []);
  return <div>{data?.name}</div>;
}

// Better
function useUser() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetchUser().then(setData);
  }, []);
  return data;
}
function UserProfile() {
  const user = useUser();
  return <div>{user?.name}</div>;
}

Separation of concerns. It’s not just for backend nerds.

2. The “Hooks Are Just Functions” Realization

Remember when you first saw useEffectYou thought, "Wow, this is elegant."

Then you added three useEffects, two useStates, and now it’s bug soup.

Let’s be clear:

Hooks are just functions. You can write your own. And you should.

Custom hooks are the cheat code of React.

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  return width;
}

Boom. Reusable. Clean. Understandable.

If you’re not writing custom hooks, you’re leaving Legos all over the floor.

3. The “Lift State, But Don’t Launch It Into Orbit” Principle

Yes, we’ve all heard it:

“Lift state up!”

Cool. But there’s a line.

If your parent component starts looking like a NASA control center, you’ve lifted too hard.

Keep the state close to where it’s needed. Only lift when necessary.

You don’t need a global state to control a dropdown. I promise.

4. The “Composition Over Configuration” Gospel

Tired of prop drilling like you’re digging for oil? Welcome to the club.

React’s secret sauce is composition. Use it.

function Modal({ children }) {
  return <div className="modal">{children}</div>;
}

<Modal>
  <h2>Are you sure?</h2>
  <button>Yes</button>
  <button>No</button>
</Modal>

Clean. Flexible. No props gymnastics.

Your component should be a LEGO brick, not a LEGO Death Star.

5. The “Render Props Aren’t Dead” Hot Take

Everyone acts like render props died when hooks came around.

They didn’t. They’re just chilling in a corner, waiting for someone to remember how powerful they are.

function MouseTracker({ render }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const handleMouseMove = (e) => setPos({ x: e.clientX, y: e.clientY });
    window.addEventListener("mousemove", handleMouseMove);
    return () => window.removeEventListener("mousemove", handleMouseMove);
  }, []);
  return render(pos);
}

// Use it like this
<MouseTracker render={({ x, y }) => <p>Mouse at {x}, {y}</p>} />

Don’t throw away tools just because they’re not trendy.

6. The “Context Is for Settings, Not Your Whole App” Rant

I swear, if I see one more app using Context for everything, I’m switching to Vue out of spite.

Context is great for themes, auth, language — things that rarely change.

But if you’re using it to pass around dynamic state that updates often?

Prepare for performance hell.

Use state management libs for that. Or better yet, local state + props. Yeah, old-school. Because it works.

7. The “UseReducer for Complex State” Revelation

When your state looks like this:

const [state, setState] = useState({
  step: 1,
  error: null,
  loading: false,
  data: null,
});

It’s time.

useReducer isn’t just for Redux nerds. It’s for people who like control.

function reducer(state, action) {
  switch (action.type) {
    case "NEXT_STEP":
      return { ...state, step: state.step + 1 };
    case "SET_ERROR":
      return { ...state, error: action.payload };
    default:
      return state;
  }
}

You’ll feel like a wizard. Or at least, someone who doesn’t want to cry reading their code.

Finally, Code Like You’ll Maintain It Hungover

These patterns didn’t just make me a better React developer.

They made me less angry, more productive, and way more confident in my codebase.

React’s flexibility is a gift and a curse. You can write beautiful abstractions… or create a flaming trash pile.

Use patterns. Write for future-you. And please — don’t nest ternaries.

Got opinions? Good. Drop a comment, leave a clap, or argue with me in public.

I love a good React debate.

Just don’t tell me class components are better — we’re not doing that again.