# Bottom-Up Idea Exploration

Original: https://swyx.io/bottom-up-ideas
Published: 2021-06-06

> My own content creation philosophy, explored through my own personal story with React

*Listen to [audio narrated version!](https://swyx.transistor.fm/episodes/second-brain-4-intermediate-packets-bottom-up-idea-exploration)*

Over 18 months from 2019-2020, I explored one single idea that spawned one of my biggest blogposts, got me invited to speak at top conferences across 3 countries, and helped me get a job at AWS. And it all started with a tweet.

- [Step 1: Respond to Others!](#stage-1-respond-to-others)
- [Step 2: Yes, And!](#step-2-yes-and)
- [Step 3: Livestream!](#step-3-livestream)
- [Step 4: Blogpost!](#step-4-blogpost)
- [Step 5: Conference Lightning Talk!](#step-5-conference-lightning-talk)
- [Step 6: Conference Livecode Talk!](#step-6-conference-livecode-talk)
- [Step 7: Advanced Conference Talk!](#step-7-advanced-conference-talk)
- [Step 8: Job Interview!](#step-8-job-interview)

> **Side note:** I know I'm still a small fry in the grand scheme of things, so please don't worry that I'm getting a big ego from this. I encourage you to follow the careers of folks like [Bret Victor](http://worrydream.com/#!/Bio), [Sarah Drasner](https://sarahdrasnerdesign.com/speaking), [Dan Abramov](https://overreacted.io/my-decade-in-review/) and [Anjana Vakil](https://www.youtube.com/results?search_query=anjana+vakil) if you truly want to know what it takes to be an industry legend.  Still, my story often encourages others to start from humble beginnings. If a simple guy like me can do so well, surely they can do better!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ooajl9yok4rffbgc2hvb.png)

## Step 1: Respond to Others!

I get a lot of my ideas from simply observing what excites people. This is key for unlocking a crucial source of content — **things I take for granted, that excites others**. It often surfaces areas of [*unconscious competence*](https://en.wikipedia.org/wiki/Four_stages_of_competence).

This was the context with which I read Jack Cross' [tweet](https://twitter.com/crosscompile/status/1100127023106805767?s=20) on Feb 26 2019: "*Was reading through [React's source code]. and I think `useState` is implemented with `useReducer`!*" 

At the time, React Hooks were all of 4 months old, and were a hotly discussed topic in webdev circles. I had known about Jack's observation for a while, but never really thought it worth comment until Jack did. I also knew that many folks were [tripping over the importance of JavaScript closures](https://twitter.com/markdalgleish/status/1095025468367990784) with the Hooks API design. I wanted to find a way to properly explain all this once and for all.

It got my gears going: I'm a believer that you only truly [Know Your Tools](https://www.swyx.io/know-your-tools/) when you can read through its source code, and can build it from scratch. I'd done the former, so I did the latter:

{% twitter 1100809424963219456 %}

You will see that the code sample here relies on an imperative `React.render` API, which is nothing like the real `ReactDom.render`. At the time I was only focused on the mental model, so I didn't think about a more faithful clone.

## Step 2: "Yes, And"!

(*90 minutes after the original tweet)*

I got quite a bit of instant feedback on that tweet, namely [this suggestion](https://twitter.com/dan_abramov/status/1100813228525916161) from Dan on the React Core team: *"You want to have a list of Hooks. Otherwise it’s boring because custom ones don’t work. Should be no more than extra 10 lines."*

That was exactly the push I needed — not just confirming that I was going down the right path, but also a suggestion for what to do next, that jibed with my own instincts. So I followed up 90 minutes later with this extension:

{% twitter 1100833207451185152 %}

This was finally simple enough to understand, yet complex enough to be useful, which [finally made it take off](https://twitter.com/swyx/status/1100833207451185152/retweets/with_comments) with a bunch of feedback.

I think Twitter is best as an [Ensemble rather than Committee](https://www.swyx.io/ensembles-vs-committees/), particularly with the "[Yes, And](https://en.wikipedia.org/wiki/Yes,_and...)" spirit of starting from where the other person leaves off. This is what Dan did with me, and I followed through.

It's important to note that I wasn't the first to observe the simplicity of Hooks. There was prior art and [very popular blogposts](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e) all making the same observation. But I was the first to *demonstrate* it in 28 lines of code, which made it a lot more approachable because it fit in a single screenshot.

> Side note: I often also get asked what to do if someone is just starting out on Twitter and doesn't have the following to get feedback like I did. I think they don't appreciate that I'd only been tweeting about webdev/React for 1 year at that point. I believe that the best way to solve the relationship cold start problem is to [Pick Up What They Put Down](https://www.swyx.io/puwtpd/).

## Step 3: Livestream!

(*Friday after the original tweet)*

Joel Hooks of Egghead.io DM'ed me to do [a livestream of this process](https://twitter.com/swyx/status/1100839318518521856) that same Friday. I think I was [in LA at the time](https://mobile.twitter.com/swyx/status/1101555809140453376) and had to do it in on shitty courtyard wifi but it went well. Unfortunately I can't find a recording of the talk, but I recall that [Eve Porcello](https://mobile.twitter.com/eveporcello) was there, together with a few dozen other React folks!

This was the first time I had *ever* livecoded anything online, and it set the stage for what was to come...

## Step 4: Blogpost!

(*2 weeks after the original tweet*)

[The blogpost version](https://www.netlify.com/blog/2019/03/11/deep-dive-how-do-react-hooks-really-work/) went live on the Netlify blog, with title and grammatical edits from my coworkers. [The response](https://mobile.twitter.com/search?q=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2019%2F03%2F11%2Fdeep-dive-how-do-react-hooks-really-work%2F&src=typed_query) was great:

{% twitter 1116607569055715328 %}

Fun fact: I was in Mexico on a [dive trip](https://mobile.twitter.com/swyx/status/1103385015159648256) with no access to internet at the time! So I never even got round to tweeting it out, but it didn't matter. By this point, the content had been 3x validated, so I was pretty confident the blogpost would do well regardless.

## Step 5: Conference Lightning Talk!

*(1 month after the original tweet)*

[Ben Dunphy](https://mobile.twitter.com/benghamine) of [Reactathon](https://www.reactathon.com/) invited me to present my blogpost as a lightning talk in April. Reactathon is the premier React conference in San Francisco - it would've been my 4th or 5th conference appearance ever at the time, so I was already starting to get used to the speaking "circuit". But this was my first time *getting invited* rather than applying through [the regular competitive CFP process](https://www.swyx.io/cfp-advice/) — so I was pretty stoked about that!

{% youtube VugRXf8Gg4o %}

I only had ~10 minutes so I just threw some code up on slides. The reception was [decent](https://twitter.com/httpJunkie/status/1112711415507222528?s=20) for the minimal work I put into it. The talk got me [shouted out](https://twitter.com/swyx/status/1117824535548579840) on the wildly popular [Syntax.fm](http://syntax.fm) podcast from Wes Bos and Scott Tolinski, from whom I learned React, as well as one from [Lee Byron](https://twitter.com/leeb/status/1112183983129784321?s=20), who [designed the original React class API](https://reactjs.org/blog/2016/09/28/our-first-50000-stars.html#api-churn).

## Step 6: Conference Livecode Talk!

*(4 months after the original tweet)*

I remember paying the ~$300 out of pocket for JSConf Asia tickets in [Jan 2018](https://twitter.com/swyx/status/956340811603390465), when I was just starting out. I had no idea that I would be *paid* to fly back to Singapore and [speak there](https://twitter.com/swyx/status/1090886781828968448) just a year later.

I proposed this talk without knowing if I could do it. I just knew from studying [Kelsey Hightower's demos](https://www.youtube.com/watch?v=U6SfRPwTKqo) and [André Staltz's advice](https://staltz.com/your-ide-as-a-presentation-tool.html) that livecoding was a great way to further demystify this concept. I had been unable to do it at Reactathon. A livecoded talk was my "white whale".

I not only [pulled it off](https://www.swyx.io/hooks/), but also managed to add some dramatic flair rendering code to screen:

{% youtube KJP1E-Y-xyo %}

*Fun fact*: I only worked out key parts of this code the night before I was due to give the talk. After breaking through on the render loop and figuring out some kinks with CodeSandbox, I stayed up all night reworking and practicing my presentation, building in failsafes in case I screwed up, and added in the [René Magritte](https://en.wikipedia.org/wiki/Ren%C3%A9_Magritte) flourish right at the end. I presented that talk on ~2 hours of sleep.

[The reception](https://twitter.com/search?q=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DKJP1E-Y-xyo&src=typed_query) *exploded*. Not only was the content 4x validated at this point, but I had worked out a compelling presentation style and left the viewer with a thought provoking question at the end.

## Step 7: Advanced Conference Talk!

(*8 months after the original tweet)*

When you have a hit like that you naturally want to follow it up, and you naturally start getting more conference invites as well. So when the GitNation folks reached out for the [React Advanced](https://reactadvanced.com/) conference in London there was only one topic I wanted to do: **explain Concurrent React** the same way I had React Hooks.

{% youtube fKlt5GFQnVc %}

*(This is the revised version for ByteConf; [the React Advanced one is here](https://www.youtube.com/watch?v=dFO4m7Y-yhs) and I did a paid version for [Egghead.io subscribers as well](https://egghead.io/lessons/react-concurrent-react-from-scratch))*

While React Hooks were a relatively simple mental model (I started this journey reducing it down to 26 lines of code), Concurrent React not only involved building in a proper time slicing scheduler and Fiber reconciler, but it also *wasn't live yet* (and still isn't fully shipped as of the time of writing 2 years later, although [React Server Components](https://dev.to/swyx/an-annotated-guide-to-the-react-server-components-demo-2a83/) is a huge step forward) so people weren't familiar with it.

Putting together this massive effort involved pulling in notes from [18 months of covering Concurrent React](https://github.com/sw-yx/concurrent-react-notes) by myself, in particular studying [prior art from Rodrigo Pombo](https://github.com/pomber/didact) in cloning the API from scratch. You can [check out his talk here](https://www.youtube.com/watch?v=8Kc2REHdwnQ) to contrast what he did vs me.

[The reception](https://twitter.com/search?q=-from%3Aswyx%20%40swyx%20reactadvanced%20until%3A2019-11-01%20since%3A2019-10-24&src=typed_query) was great but I neglected to tweak my talk for the venue. I had a livecoding talk, but it was a very long conference hall, which guaranteed that half the audience (about 1500 people) couldn't see a thing I wrote 🤦‍♂️. However I did [meet up with Nader Dabit](https://twitter.com/swyx/status/1187740301831659522) at that conference, which set things in motion...

## Step 8: Job Interview!

*(11 months after the original tweet)*

Within 3 months of that conference I was at Amazon's offices in Seattle on my final interview day for an open spot on Nader's team. The developer advocate interview at Amazon requires you to prepare a talk on something you know well, and field questions on it by non-domain-expert engineers.

So I just presented my talk again, building "Concurrent React from Scratch" in front of 3 people who only barely knew React and weren't aware of my prior experience with this topic. 

I got the offer the next day.

## Why I Wrote This

I've recently been guiding a group of ~50 students as a mentor for [Tiago Forte's Building A Second Brain](https://www.swyx.io/tiago-forte-second-brain/) course, and it's been remarkably helpful for solidifying my own takeaways and for helping others go down the same path I have ("When one teaches, two learn"). 

Week 4 was the lesson on Intermediate Packets, which Tiago has [written about](https://medium.com/praxis-blog/bending-the-curves-of-productivity-25edb268672f) and [covered on his podcast](https://www.listennotes.com/podcasts/the-building-a/intermediate-packets-TO04J8Q5XZI/) if you want to catch up on it. Intermediate Packets are often presented as a way to take a big goal and break it down into pieces. That's a great way to plan out a big project in a **top-down** fashion — however I think **bottoms up** is greatly underappreciated as a content strategy.

As you can tell from my story, things escalated pretty quickly from just a random tweet, to me being flown across the world to speak at conferences and helping me get a job at a FAANG company. But at no point did I ***plan*** to do any of that. I just focused on an interesting problem, made the next possible move available to me, and responded to feedback.

**For each one of these hits I have, there are a thousand that go absolutely nowhere.** Some tweets develop into blogposts, some blogposts develop into talks, and then they just fall flat. I only really have a true hit once a year, but it takes all the dead ends and exploration for me to find the real gems that resonate with others. 

If I'd developed each idea with a top-down big project goal in mind, I'd fail to reach them 99.9% of the time. I think **bottom-up content creation with exploration over expectations** is a far more sustainable approach.

Again, I write not to brag, because I'm plenty aware that there are much better developers and speakers than I. But every time I tell this story, it inspires people to start on their own journey [learning in public](https://swyx.io/LIP). I'm sure people with more talent and determination will be able to take this process far further than I have. I hope this post has shown you a little of the behind the scenes.

## Reactions

- Matias Woloski, cofounder of Auth0, [notes that](https://twitter.com/woloski/status/1404105211543801864?s=20) this is a form of "Content Market Fit", similar to "Product Market Fit". Auth0's advocacy of JWT's started with a blogpost, then into conference speaking, and finally developing http://jwt.io/ as the industry reference.
- Netlify's Mathias Biilmann also went through a similar journey with the [Why Static Site Generators Are The Next Big Thing](https://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/) blogpost developing into [The New Front-end Stack. Javascript, APIs and Markup](https://vimeo.com/163522126) at SmashingConf and then https://jamstack.org/
- See also David Perell's [Content Triangle](https://perell.com/essay/the-ultimate-guide-to-writing-online/)