setState takes a callback as its second argument.

We’ve looked at handling asynchronous state with lifecycle methods. But, to be honest, it’s a lot of ceremony for some simple needs.

Fortunately, setState takes a callback.

We can use the setState callback to keep state-handling close to set-setting.

setState(
  { name: "Michael" },
  () => console.log(this.state)
);// => { name: "Michael" }

When this callback fires, this.state is the updated state.

Confession

I use the callback most of the time 😬.

When not to use the callback

The docs recommend that you use the lifecycle events.

Here’s why.

PureComponent and shouldComponentUpdate can be used to tune up…

setState is asynchronous.

“Asynchronous” is a big word. So what does it mean in practice?

It means you can’t call setState on one line and assume state has changed on the next.

setState({ name: "Michael" });
console.log(this.state.name);  // Nope.

You’ll likely log the previous, unchanged state. This probably isn’t what you expected. You expected the next state—the updated state.

So how do we get that?

If you love something, set it free.

Embrace your inner determinist.

Think of setState as setStateFree. Set state free and it’ll come back in the next render.

componentDidUpdate(_, previousState) {
  console.log(previousState); // => {}
  console.log(this.state);    // => { name: "Michael" }
}

…

If you have access to a 401k, you’re lucky. A 401k is a great way to put money away for your future self. Unfortunately, the details around them can be a little looming. Let’s talk about what a 401k is, what job it does for you, and when you should use one.

What’s a 401k?

A 401k is a company sponsored retirement plan. It allows you save a shit-ton money with a tax benefit. In 2016, you can put up to $18,000/yr into your 401k.

What’s the tax benefit?

401k contributions are withheld from your paycheck. If you’re making Traditional 401k contributions (that’s what I do), contributions…

You got you’re a dream job at a great company. Good for you. You saving?

No? Do it right now.

Here’s my I-know-nothing-about-money-but-I-worry-about-old-man-Chan, 5 step plan.

Step 1: Say “saving is easy”

Investing can be hard. What we’re doing isn’t investing, it’s saving. Saving is the habit of not spending all your money.

Saving is easy.

Step 2: Ask how to access your 401k

Your dream job likely has an account for you. If not, it’ll take 10 minutes to make one.

Create or log into your companies 401k site.

Step 3: Send 1% of your check to the 401k

You can do 1%. Really, you can. Do it.

Step 4: Select a “Target Retirement” fund

This is your first test. Don’t get sidetracked by the details. They literally don’t matter…

I hate adding libraries to my React apps.

If you’re write React, you’re likely having a hard time deciding which style library to add. Maybe you go with CSS-in-JS and punt on media-queries. Maybe you use css-loader and hitch your builds to Webpack for the foreseeable future. Or maybe you bypass the problem all together and run back to the warm embrace of Sass.

All solutions have trade-offs. If these questions are keeping you from doing work, opt out.

One of the ways I opt out is with the style tag.

<style> + dangerouslySetInnerHTML

const MyStyledComponent = props =>
  <div className="styled">
    Hover for…

Smart folks like to use the word “scale” to scare less experienced folks into doing the “right” thing.

I’ve seen this a lot recently from the CSS-Tricks community toward React developers. The threat I hear is: “This idea won’t scale; we’ve already solved this in CSS.” But these arguments from authority are largely unproven, when used with components.

So, let’s talk about scale and whether or not those CSS tricks have anything to offer us component authors.

“Scale”

Scale isn’t absolute.

Every problem of scale is a different problem. When it comes to styles, I see two groups of scalers:

• App…

World Retinoblastoma Awareness Week

Every week is an awareness week. I’ll try not to pile on.

Finding out you’ll be having a girl in 6 months is a remarkable feeling. You imagine she’ll have her mother’s beauty and smarts and your unflappability. You suddenly become keenly aware of how hard the world is on women and begin hoping for better.

The month we brought Ruby home, she was diagnosed with Retinoblastoma. For the uninitiated, I call it “bastard eye-tumor disease.” She can spontaniously develop new tumors until she’s 7 and is at risk for secondary cancers the rest of her…