Portfolio

Here’s a clean Markdown-only version with all HTML removed and light polishing, while keeping your voice and structure intact.

Right now, you don’t need to pay anything for online courses.

I was thinking about buying some backend development courses, and then I realized something important:

The biggest blocker is no longer access to information. The internet already has everything — especially for web development, which is largely open-source and well-documented.

The real blocker is knowing what to learn.

That’s where paid courses appear valuable: their tables of contents expose all the things you don’t yet know to search for.

Roughly:

The first 60% of a Udemy course will be discovered naturally by any beginner.
Another 20% comes from about a year of experience.
But the final 20%? That’s for the truly seasoned. Those are advanced concepts beginners miss—not because they’re hard, but because beginners don’t even know what questions to ask yet.

That’s the actual value of courses: extracting learning success criteria. Once you have that list, you can learn everything yourself through documentation, YouTube, blogs, and experiments.

Honestly, it’s as easy as pasting a Udemy table of contents into ChatGPT and asking for the last 20%.

Below is an example: a distilled set of topics extracted from a React.js Udemy table of contents.

10 React Concepts That Separate Juniors from Pros

There’s a big leap between building to-do apps and architecting robust, production-grade UIs. Here are 10 under-the-radar concepts every React developer should eventually master — plus a few bonus ideas professionals obsess over.

1. React Server Components (RSC)

Introduced in React 18 and evolving in React 19, Server Components challenge the traditional client-heavy rendering model. They allow developers to move logic to the server without duplicating code, resulting in zero bundle size for server-only logic. Most juniors don’t even know this exists, yet it’s foundational for building fast, scalable apps.

2. useImperativeHandle

Ever needed to trigger a child component’s method from a parent? That’s where useImperativeHandle comes in. While rarely needed, it’s essential when building reusable component libraries or complex UI elements like modals, carousels, and design systems.

3. Portals

Portals let you render elements outside the main DOM tree — crucial for modals, tooltips, and dropdowns. They aren’t just a neat trick; they’re necessary for accessibility, focus control, and layout correctness.

4. useReducer with Context

When state becomes hard to reason about, useReducer combined with Context provides a scalable mental model. It mirrors Redux-style predictability without the boilerplate and is ideal for medium-to-large apps that outgrow useState.

5. Performance Optimizations

Hooks like React.memo, useMemo, and useCallback can help — but they’re tradeoffs, not magic. Misusing them can actually hurt performance. Knowing when not to optimize is what separates pros from juniors.

6. Custom Hooks as Abstractions

Custom hooks aren’t just syntactic sugar. They let you build reusable logic layers for forms, data fetching, modals, and more. Mastering them means you’re no longer just writing components — you’re designing infrastructure.

7. Form Actions (React 19+)

The new Form Actions API emphasizes progressive enhancement. Even if JavaScript fails, the server still handles submissions. This marks a shift from JS-first thinking to resilient, graceful UX design.

8. TanStack Query (React Query)

TanStack Query abstracts away much of the complexity of fetching, caching, and syncing server data. In many apps, it can fully replace Redux and dramatically simplify data-heavy workflows.

9. Auth + Routing + Data Fetching

Combining authentication, route protection, and server/client data-fetching flows (especially in frameworks like Next.js) is non-trivial. Many juniors copy boilerplate without understanding how auth, middleware, redirects, and caching actually interact.

10. Next.js App Router Mental Model

The App Router introduces nested layouts, Server Components, and the use client directive. Understanding how to isolate interactivity while optimizing hydration and caching is key to building fast, maintainable Next.js apps.

Bonus: Meta Concepts Pros Think About Constantly

Preserving unidirectional data flow, even with shared or global state
Colocating and normalizing state to avoid prop drilling and tight coupling
Designing ergonomic component APIs (props, accessibility, function signatures)
Deciding when to fetch data statically vs at runtime — preload, defer, cache, mutate
Building design systems with Tailwind, Styled Components, or CSS-in-JS

The Real Barrier?

Sure, courses put everything “in one place,” and some instructors explain things better than random videos or docs.

But if you’re truly dedicated, you can learn all of the same material yourself.

The real constraint isn’t how many courses you can pay for.

It’s how much focused time you’re willing to invest.

Every Udemy Course is Free