Map of React v18 API

My visual, spatial overview of the React v18 API.

Published · Last updated

When I know a library well, I know how its parts relate such that I can organize them spatially in my head. I know React pretty well, so I’d like to present its API in a way that makes sense to me, spatially, a map if you will.

Best viewed in a separate tab.

I think of learning a new skill as similar to physically exploring a new area, like getting familiar with the street layout of a new city, or getting to know all the trails in a forest.

When you’re new to a city, you’re constantly orienting and trying to form a map of it in your head (presume you have not spent too much time looking at maps beforehand as I tend to do). As you learn more, you start to get a sense of the larger scale layout. Sometimes two up-until-then mentally disjoint areas suddenly connect; “If I take this road I’ll end up on that street, yeah yeah I know that street already”. You’ve suddenly connected two separate maps in your head and gained some overview! When such moments happen during learning, it’s sweet, very sweet.

The idea of this map is to present Reacts API in a more meaningful layout — more meaningful than say, an alphabetical list — something you can explore. It reflects the connections I’ve made. I hope that it gives you visual intuition of how different parts of the React API relate. Practically, this means gaining new insights in to how certain hooks are similar, or finding an optional parameter you didn’t know yet.

An additional goal of it is to organize quality articles on the different parts. Search engine results for React APIs are mostly underwhelming. A lot of SEO-y writing and low-effort material floats to the surface. Most of these are articles of dubious quality that are not worth your time. So where to find to the good stuff? Well that’s where this map comes in.

Over the years, I’ve been collecting links of good blogposts. Note, good in my opinion, it’s called “Jules’ Map” for a reason. I’ve added these vetted posts as links in the “Recommended Reading” section in the dialogs.

My preference is personal blogs; devs writing out of their own interest and based on their own experience. I find that way more valuable than writing meant to drive traffic.

Ideas I Didn’t Get To

This is purely a passion project and at some point, the passion runs out. I’ve learned that it’s better for me to call it done at a point where I’m satisfied with it and move on.

Here are the ideas that I think are good but didn’t pursue.

Include Adjacent Tools

You don’t exclusively use the React API when developing a React app, it’s just one part of the mix.

  • For one, React comes with a renderer, most commonly react-dom. That could be included.
  • Technically JSX is a syntax extension but I can’t imagine React without it, yet it’s currently not in the map.
  • There are integral tools of the React developer experience like the React DevTools, eslint-plugin-react-hooks, and eslint-plugin-react. useDebugValue and Profiler would then point to the React devtools.
Diagrams for Hooks

The current details view is functional but a little dry. I would have liked that to be more diagram-y and more spatial too. I might tackle this as a separate project.

More Groupings Markings
  • Mark ‘the rarely used parts’ like useImperativeHandle and useLayoutEffect.
    • Can useImperativeHandle be considered a library hook? What about useDebugValue?
  • Mark ‘escape hatches’ from Reacts declarative model.

Thanks and credits to everyone who contributed the old and the new React docs. Additional thanks to all the authors of the posts I’ve collected.

If you’ve found this map helpful or just cool, you can buy me a coffee. It’s certainly not necessary but much appreciated.

Buy Me A Coffee Tip with Stripe Tip with PayPal