You can build things now. That is not a participation trophy - the reading list in the
last lesson is a real application, and the ideas in it scale a long way further than they
look.
What is left is a large and confusing pile of tools, and the most useful thing this
course can do at the end is tell you what is in it and what to leave alone. React’s
ecosystem is very good at making you feel behind. You are not.
Learn these next
Routing. Right now your app is one page. Real apps have URLs that mean something, a
back button that works, and links you can share. That is a router’s job, and
React Router is the one to learn first. It is the single
biggest jump in what you can build.
More practice, before anything else on this list. The most common mistake at this
point is collecting tools instead of building things. Build three or four small apps that
you actually want. You will learn more from the fourth one than from any tutorial,
because by then you are making decisions rather than following steps.
useContext. When a value is needed by components five levels down and every layer in
between is passing it along untouched, context lets you skip the middle. The current
theme, the signed-in user, the language: things that are genuinely global.
The caution from lesson 9 stands. Reach for it when threading actually hurts, not in
advance. Context makes data flow invisible, and invisible data flow is what React was
built to avoid.
useReducer. When one component has five pieces of related state and eight handlers
that update them in combinations, useReducer gathers all that logic into one function
that takes the current state and an action and returns the next state. It is useState’s
bigger sibling, not a replacement, and you will know when you need it because your
component will already be a mess.
Learn these when you need them
A data-fetching library. Lesson 10 wrote a fetch by hand so you know what is
underneath. In practice most teams use TanStack Query or
similar, because caching, retries, deduplicating identical requests, refetching stale data
and keeping loading state consistent are a great deal of work to do well. Every one of them
is a bug you will otherwise write yourself.
Testing. React Testing Library with Vitest. Its whole
philosophy is to test what a user does - find the button by its text, click it, check what
appeared - rather than poking at internals. That happens to make it a good way to check
your own understanding of what a component does.
Styling at scale. Plain CSS files got you here and will get you further than people
admit. When it stops scaling, look at CSS Modules or Tailwind. This is the area with the
most noise and the least consequence: every option works.
Forms at scale. Lesson 8’s approach is fine up to a point. Past it, React Hook Form
handles validation, errors and touched fields without you hand-rolling the lot.
Know these exist, ignore them for now
Next.js, and server components. Next.js is a framework built on React that adds
routing, server rendering and a build pipeline. React Server Components are a genuinely
different model in which some components run only on the server and never ship to the
browser.
Both are worth learning eventually and neither is worth learning now. Server components
change what useState and useEffect even mean in a file, and that distinction is hard to
hold on to before the client-side model is second nature. Learn React first. Next.js is
much easier once you have.
TypeScript. It adds types to JavaScript, it catches a real class of bug, and most
professional React is written in it. It is also a second language to learn at the same
time as a first library, which is why this course left it out. Once React feels
comfortable, add it - the way in is to start a Vite project with the TypeScript template
and type your props.
State management libraries. Redux, Zustand, Jotai and friends. There was a period when
every React app started with Redux; that period is over. Lifting state and context handle
most applications. Reach for one of these when you have a specific problem you can
describe, not because a job advert mentioned it.
Performance work. useMemo, useCallback, React.memo. These exist to skip work that
is genuinely expensive. Used pre-emptively they add complexity and cost for no measured
gain. There is also now the React Compiler, a separate opt-in build tool that inserts much
of this memoisation for you. It matters here mainly because it makes hand-written useMemo
less necessary than the older articles you will find suggest. Rule: measure first, and only
optimise something you have watched be slow.
Two habits worth keeping
The console stays open. It has been right every time in this course - the unrecognised
tag, the missing key, the uncontrolled input. Most React problems announce themselves and
are only mysterious to people who are not looking.
Ask “could I calculate this?” before adding state. Lessons 9, 10 and 11 are the same
sentence three times, because it is the decision that most determines whether an app stays
workable. Every piece of state is a thing that can disagree with another thing. The best
React code is mostly arithmetic on a very small number of facts.
The official docs are good now
react.dev was rewritten from scratch and is genuinely excellent - the
Learn section in particular. Older React tutorials on the wider web are a minefield,
because so much changed with hooks and again with React 19. If something you read mentions
class components, componentDidMount or Create React App, it predates all of it. Check the
date, and prefer the official docs.
That is the course
Twelve lessons ago the argument was that React exists to stop your screen and your data
disagreeing. Everything since has been that one idea, worked out: components describe what
the screen should be, props carry data down, state holds the few facts you cannot
calculate, and effects reach outside when something genuinely lives out there.
If you get stuck, or you build something you are pleased with, I would like to hear about
it - gorgekara@gmail.com.