Swizec Teller

Articles & Tutorials

How to drive React state with D3 transitions for complex animation (swizec.com)
Jul 01, 2019
Here’s part 2 of Kiran B’s challenge from last week - animating our drilldown piechart.
A Drilldown Piechart with React and D3 (swizec.com)
Jun 28, 2019
A few days ago Kiran B sent me a challenge via Twitter DM: How can I make a drilldown piechart?
Getting the CSS out of rendered React components (swizec.com)
Jun 03, 2019
Here’s a fun problem for ya: How do you get the CSS from a rendered React component? Right-click, inspect element, see it in dev tools. What about programmatically?
Custom markdown extensions with Remark and HAST handlers (swizec.com)
Apr 08, 2019
Markdown is all the rage these days. A simple text format for rich documents, you see it everywhere from GitHub issues to Slack messages.
    Fixing laggy UI with React.memo (swizec.com)
    Mar 18, 2019
    The other day I was dealing with some laggy UI on a project and discovered React.memo as a way of fixing it. I don’t know how long React.memo has been a thing but it’s new to me and it’s amazing.
    Custom react hooks (swizec.com)
    Feb 11, 2019
    This is a story full of wonderful new possibilities, beautiful codey things, and components clean as the mountain air. All thanks to custom react hooks.
    React hooks in a nut shell (swizec.com)
    Oct 29, 2018
    I watched Ryan's talk 90% cleaner with hooks last night, Dan's and Sophie's talk announcing hooks this morning, read all the docs, and watched Twitter like a hawk. Hours of research condensed into the next 200 words because I love you.

    Video Guides & Talks

    THE key insight to understand any D3 example (youtube.com)
    Nov 15, 2018
    A sample video from my upcoming course on #reactjs and #d3js
    Live: Trying out ReactVR for 3D dataviz (youtube.com)
    Aug 03, 2018
    Playing around with ReactVR, part of research for my new React + D3 book and course.
    Build a simple middleware to always sync state to localstorage (youtube.com)
    Aug 01, 2018
    Tweaking our main component so that it saves stuff to localstorage was cool and all, but we can do better: A middleware approach that ties into our state library.
    Simplest way to save your React state – localstorage (youtube.com)
    Jul 31, 2018
    Need to preserve some user state across sessions? Here's a quick and dirty way that works really well. Dump the important parts of your data store to localstorage on every change.
    The pesky problem of persisting your React state (youtube.com)
    Jul 27, 2018
    How should you think about persisting your state? What happens when a user refreshes the page? What if they want to come back a year later and continue where they left off?
    Why so many React state libraries? (youtube.com)
    Jul 25, 2018
    We've tried 8 different libraries. There's many more out there. What's the point? Are they really THAT different? Nah. They all do the same things in largely the same ways. Pick the one that strikes your fancy best.
    Constate might be the best state library yet (youtube.com)
    Jul 24, 2018
    Constate, what a neat little state management library. Code compact, state immutable, everything neatly organized. Love it
    Govern is components for your state (youtube.com)
    Jul 20, 2018
    A conceptually fascinating library, Govern gives you state management built from React-like components that return state objects instead of JSX.
    Bey is like Unstated, Redux, and Immer had a baby and it's great (youtube.com)
    Jul 19, 2018
    Bey is a new state management library that takes the best concepts from many worlds. Really cool
    How XState helps you think (youtube.com)
    Jul 17, 2018
    David K. Piano's XState is a brilliant idea: A library that helps you reason about your state as actual finite state machines AND EVEN DRAWS THEM OUT.
    Unstated state lib (youtube.com)
    Jul 16, 2018
    Unstated, state so simple it goes without saying. It really does. This might be the simplest easiest to grok solution I've ever seen.
    How mobx-state-tree makes mobx scale (youtube.com)
    Jul 13, 2018
    mobx-state-tree is amazin!. Fixes just about every I ever hadwith building large scale MobX apps.
    MobX & Redux side by side (youtube.com)
    Jul 12, 2018
    Same app, 2 state management libs. Redux is super explicit, MobX fits in one file.
    How MobX works and the mental model you should use (youtube.com)
    Jul 10, 2018
    You know how to use MobX, but do you have a good mental model for how it works? Perhaps it feels like magic?
    How to MobX in a nutshell (youtube.com)
    Jul 09, 2018
    Learn the basics of using MobX and build a silly example to see how it works.
    What makes MobX so wonderful? (youtube.com)
    Jul 06, 2018
    MobX is wonderful. My first love when it comes to React state management.
    Redux tips & tricks (youtube.com)
    Jul 05, 2018
    Here's a few tips and tricks I learned about Redux over the years.
    How Redux thunks make your life easier (youtube.com)
    Jul 03, 2018
    Redux with its actions and reducers and elegant store is great. But what makes it really shine are thunks. Thunks are great.
    What does Redux actually _do_? (youtube.com)
    Jul 02, 2018
    So what does Redux actually _do_ when you do your reducers and your actions and connect things to the store?
    Redux in 2 minutes (youtube.com)
    Jul 01, 2018
    So you know WHY you'd wanna use Redux and when. But how?
    How Redux makes your code more refactorable (youtube.com)
    Jun 30, 2018
    You've heard of Redux haven't you? It's great and everyone's using it. But why? When? Does it always make sense to reach for Redux?
    Your redux mobx or vuex store is a mess. But why? (youtube.com)
    Jun 29, 2018
    Your redux or mobx or vuex store is a mess. There's too much stuff in there. So what went wrong?
    What goes in your global state, anyway? (youtube.com)
    Jun 28, 2018
    Your redux or mobx or vuex store is a mess. There's too much stuff in there. So what went wrong?
    Your state as a state machine (youtube.com)
    Jun 27, 2018
    Your state is a state machine. That helps you think about it. Values are circles, actions are arrows.
    Why state management matters (youtube.com)
    Jun 26, 2018
    Learn all about state management in modern webapps.
    Opensource your React component (youtube.com)
    May 08, 2018
    So you've built an amazing React component. It's self-contained, does great things, and you use it all over.
      Build your components with Storybook (youtube.com)
      May 07, 2018
      You'll soon realize that dealing with your whole app when all you wanna do is build the perfect button is annoying. So build your components in isolation first, then use them in your project.
      Learn React Router in 2 minutes (youtube.com)
      May 05, 2018
      Plus a lesson about polluting your low level components with context.
      Build forms with React in 2 minutes (youtube.com)
      May 04, 2018
      Build simple forms with React controlled components and keep your API declarative.
      How you can choose what goes in what component? (youtube.com)
      May 03, 2018
      A question everybody asks: How do I decide what's in my component? When should I split it up? How many abstractions should I build?
      Handling errors with error boundaries (youtube.com)
      Apr 30, 2018
      When something goes wrong, React turns your whole app blank. You can fix that with error boundaries.
      How you can use React Portals (youtube.com)
      Apr 29, 2018
      React portals let your component control any part of your app as if it was its own child element. Pretty neat.
      Render prop or function as children? (youtube.com)
      Apr 27, 2018
      Make your users happy, keep their codebase consistent, support both patterns.
      Why & How You Should Use React Render Props (youtube.com)
      Apr 26, 2018
      You can think of them as dependency injection or as inversion of control. The point is that you pass a component into a component and it lets your consumer define how something gets rendered.
      Higher Order Components HOC (youtube.com)
      Apr 25, 2018
      High order Components let you wrap any component in a new component. This lets you share functionality between different components in your app. In this video we build a simple clickLogger to show how it works in principle.
      Patterns for component reuse (youtube.com)
      Apr 24, 2018
      You build components with the linux philosophy. Do one thing and do it well. 👆Then assemble for bigger things. Higher order components, render props, function as children, and composite components take a different approach.
      React 16.3 Lifecycle Methods (youtube.com)
      Apr 23, 2018
      React lifecycles, they seem absolutely crucial, but really you'll use them for loading data and not much else. Sometimes for 3rd party library integration or making declarative animations.
      When and how you use React refs (youtube.com)
      Apr 21, 2018
      You should never ever under absolutely no circumstances ever need to use direct DOM manipulation in a React component.
      Does the key prop still matter? (youtube.com)
      Apr 20, 2018
      React will yell at you, if you render a list and don't give each element a unique key. But does it really matter?
      Why styled components are best (youtube.com)
      Apr 19, 2018
      Styled components are my fav approach to styling React. Best balance between normal CSS and css-in-js.
      CSS Modules in 2 minutes (youtube.com)
      Apr 18, 2018
      CSS Modules are not my favorite, but they're pretty much the only option when you have a bunch of existing CSS that you want to make better.
      Why, when, and how to use the style prop (youtube.com)
      Apr 17, 2018
      The style prop is great. It's there by default and it works. You should use it for one-off styling overrides or your app is gonna get unruly.
      Styling your React components (youtube.com)
      Apr 16, 2018
      Styling is hard. There are many ways to do it. Do you go CSS, do you go css-in-js, which css-in-js do you choose?
      React 16.3 Context API explained in 2 minutes (youtube.com)
      Apr 16, 2018
      The new React 16.3 context API. Why to use it, when to use it, how to use it. All in 2 minutes 20 seconds and 150 milliseconds.
      How React components talk to each other (youtube.com)
      Apr 14, 2018
      Yesterday we said that props flow down and callbacks fly back up. Today we're putting that into practice with some code.
      Props flow down callbacks fly up (youtube.com)
      Apr 13, 2018
      How do you share state between components? With React (and Vue) we like to keep our dataflow unidirectional. That means we hoist state to the least common denominator, pass it down via props, and change it back up with callbacks.
      React event API and you (youtube.com)
      Apr 12, 2018
      React comes with a full event API. It's great. No more addEventListener, no more memory leaks. But there's one bit that's hard 👉`this`
      How stateful rendering makes your job easy (youtube.com)
      Apr 11, 2018
      Your UI is an expression of state. Manipulate the state, change the UI. Never worry about the rendering.
      Why you need both state and props (youtube.com)
      Apr 10, 2018
      Both state and props are just JavaScript values that you use when rendering JSX. So why do you need both?
      Your First React Component (youtube.com)
      Apr 08, 2018
      We're building towards a chat app 💬
      How JSX makes your life easier (youtube.com)
      Apr 07, 2018
      Some still debate it, but I love how JSX lets you get in there and get your hands dirty right with the stuff your code is meant to be outputting. Like a top chef 👩‍🍳 gently massaging a steak. 🥩
      Why are components so great (youtube.com)
      Apr 06, 2018
      React, Vue, Angular, or whatever. Components are the future and you should learn how to think in them. Here's why.
      Data Visualizations with React + D3 (youtube.com)
      Mar 31, 2018
      React can make your D3 amazing. Want to animate 20,000 elements with React? I'll show you. Want to build a complex dataviz? You'll know how. Want to write maintainable dataviz components that you can reuse in any project? I gotchu, fam. This talk shows you everything I've learned about creating reusable and maintainable graphical components over 3 years of hammering away at the question: 'Jeez D3 sure is hard to learn, how do we make this easier?'
      The Component is King for Modern Web Development (youtube.com)
      Dec 14, 2017
      Swizec Teller talks about how components are the future of web development.

      Courses & Video Series

      React for Data Visualization (reactfordataviz.com)
      Mar 04, 2019
      Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization.
      Learn While You Poop: State (youtube.com)
      Jun 25, 2018
      Learn all about state management in modern webapps

      Books & Guides

      React+D3v4 (swizec.com)
      Aug 22, 2017
      Become a data visualization engineer with React + D3v4