
Typescript, for all its benefits, isn't the best at making its utilities well known.

One Typescript trick I wish I'd known about much sooner is ["`const` assertions".](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const-assertions)

Const assertions, as the name implies, are a way to "lock in" the type of an object that you don't expect to change.

By default, if you create an object, Typescript will give fairly loose type definitions for each value:

<Image alt="typescript metadata example" src="/images/typescript-const-example-1.png" height={165} width={305} />

However, if you know that these values won't change, it can be more helpful to use `const` to lock in the type.

<Image alt="typescript metadata example" src="/images/typescript-const-example-2.png" height={168} width={436} />

This does a few things:

1. It makes all of the properties `readonly`, so that they can't accidentally be changed.
2. It prevents you from doing checks that would be impossible

```typescript
const metadata = {
    title: "Matt's Blog",
    description: 'This is a blog, I guess'
} as const;

// the following line will return:
/*
This condition will always return 'false'
since the types '"Matt's Blog"' and '"Some other title"'
have no overlap.(2367)
*/
if (metadata.title === 'Some other title') {
    alert('This should not be possible');
}
```


Typescript Const Assertions ("as const"), Explained


If you're an uninitiated JavaScript developer, reading through a large Typescript codebase can be intimidating.

And unfortunately, this might scare many away from giving it a try.

The truth is that you can get a ton of benefit from using typescript without using complex types and using advanced features like generics and polymorphic types.

Almost all of the popular NPM packages you either have types included or have community-created types that are going completely unused in a regular JS codebase.

With that in mind, let's go through the "easy wins" you can use to get the most out of typescript.

## Utilize Your Text Editor

[typescript + VS Code Trojan horse image]

To get the most out of Typescript, you'll more than likely have to use VS code, which has a ton of Typescript integrations built in (since they're both made by Microsoft).

The biggest thing to use is "intellisense". You probably already use it, but when you write a variable and type a dot, VS code will try to autocomplete with the known methods / properties for that variable.

This can help with built-in methods (like calling .replace on a string) but also help explore methods for external libraries.

And if you need more information about a method, you can mouse over a method or variable to see the types and possibly the documentation for the method included by the library.

If you're lucky, it might even include a link to a section of their documentation or an example.

And if you’re writing your own functions, VS Code is really good at inferring types based on your usage.

## Don’t be afraid to use “any” (at first)

Something that can easily frustrate people who start to use Typescript is defining types before you’ve finalized a function.

Instead, if you’re starting to write a function and running into Typescript errors, just set the type to “any”.

Personally, I’ve found that adding types too early ends up creating more upkeep without much benefit.

Once a function or API has been settled, you can think through the types and allow them to help document your code.

## When in doubt, reference other code





Getting The Most out of Typescript

Lessons learned from a mountain of unfinished projects

How to Stop Worrying and Ship Your Projects



I'll start with a disclaimer: I am not the biggest fan of Redux.

I think Redux has some great ideas, but it tends to overcomplicate things and create more problems than it solves.

It wasn't until I started using React's [`useReducer` hook](https://reactjs.org/docs/hooks-reference.html#usereducer) that I started to appreciate what a reducer does.

As I started using it more, I even started to realize that I hadn't fully grasped what a "reducer" actually _was_.

> A reducer is basically a function that takes in a series of actions and an `initialState`, and then "reduces" them to get the current state of the application.

If this sounds familiar, it's because it's the same as the `.reduce` method for arrays:

```js
const actions = [{
  type: 'SIGN_IN',
  payload: { name: 'Chidi' }
}, {
  type: 'SIGN_OUT'
}]

const initialState = {
  user: null,
}

const currentState = actions.reduce((state, action) => {
// to find the current state of our app
// we take our initialState and apply all the actions on top of it
  if (action.type === 'SIGN_IN') {
    state = { ...state, user: { name: action.payload } }
  }

  if (action.type === 'SIGN_OUT') {
    state = { ...state, user: null }
  }

  return state;
// this is how we define our initial state in `.reduce`
}, initialState);

// currentState would equal { user: null }
```

Here, `currentState` would return `{ user: null }`, because even though we signed in, the last action we took was signing out.

If you've used Redux or `useReducer` before, this will look similar even though there's no actual "reducer" in this code.

The reason this is helpful in React is because we frequently have lots of pieces of state we need to track, and they'll often change in groups.

So instead of using 4 or 5 `useState` calls, we can use a reducer to create _actions_ that describe our different state changes.

Let's start with this example of a login form:

```jsx react-live
const { useState } = React;
const LoginForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState(null);
  const [errorMessage, setErrorMessage] = useState(null);

  async function handleSubmit(e) {
    e.preventDefault();
    // before we send the request, change loading state
    setIsLoading(true);

    try {
      // send data to your "API"
      const response = await setTimeout(() => ({ data: 'success' }), 500)

      // if it's successful, set the data in state
      setData(response.data);
      alert('Success')
    } catch (error) {
      // if something goes wrong, they shouldn't get stuck in the loading state
      setErrorMessage(error.message);
    }

    setIsLoading(false);
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* we're using a fieldset here to disable all fields while the form is loading
        https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
      */}
      <fieldset disabled={isLoading}>
        <label>
          Email
          <input
            value={email}
            onChange={e => setEmail(e.target.value)}
          />
        </label>
        <label>
          Password
          <input
            type="password"
            value={password}
            onChange={e => setPassword(e.target.value)}
          />
        </label>
        {errorMessage !== null && <div>{errorMessage}</div>}
        <button type="submit">Sign In</button>
      </fieldset>
    </form>
  )
}

render(<LoginForm />)
```

This is a fairly standard component pattern for something like a login form. It includes:
- Tracking input values and storing them in state
- A loading state boolean to disable parts of the UI
- Error handling and error message feedback

In its current form it works fine, but if we added one or two more fields (maybe something like a "Stay Logged In" checkbox), it could start to become hard to manage.

Instead, we could try to rethink our component's state changes in terms of "actions".

When we make a request, we could call the action something like `START_SIGN_IN`, and it would change our `isLoading` field to `true`.

When we get data back, we could make an action called `SIGN_IN_SUCCESS`, which would set the `isLoading` field to `false` and set our `data` with our request response.

Let's start by converting these "actions" into a reducer:

```js
// a reducer takes the current state and the next action as params
function reducer(state, action) {
  switch (action.type) {
    // we'll use this to handle our input field changes
    case 'HANDLE_CHANGE':
      // this syntax allows us to dynamically declare the key on an object
      // so for our "email" input, this would be { email: "chidi@gmail.com" }
      return { ...state, [action.name]: action.payload };
    // this is how we start our loading step
    case 'START_SIGN_IN':
      return { ...state, isLoading: true };
    case 'SIGN_IN_SUCCESS':
      return { ...state, isLoading: false, data: action.payload };
    case 'SET_ERROR_MESSAGE':
      return { ...state, isLoading: false, errorMessage: action.payload };
    // we use this default to make sure any typos don't fail silently
    default:
      throw new Error(`Action ${action.type} not found`);
  }
}
```

Now, we can take this reducer and pass it to the React `useReducer` hook like this:

```jsx
// for our initial state, we'll use all the initial states above in our `useState()` calls
const initialState = {
  email: '',
  password: '',
  isLoading: false,
  data: null,
  errorMessage: null,
}

const LoginForm = () => {
  // we'll use our `reducer` from above
  const [state, dispatch] = useReducer(reducer, initialState);
  // ...rest of the component
}
```

Now we have a `state` object and a `dispatch` function that we can use to call our actions. So if we wanted to handle a successful sign in, we would call:

```js
dispatch({ type: 'SIGN_IN_SUCCESS', payload: data})
```

This is telling our reducer that the action we want to use is called `SIGN_IN_SUCCESS`, and the `payload` is any additional data we need to pass to our action. In this case, it's the response we're getting from the API.

Now we can change all of our `setState` calls to `dispatch` calls, and you'll see how it becomes easier to understand what's happening at each step in your app.

For example, in the `handleSubmit` function, you can read the actions like instructions. First you "start sign in", and if it's successful you dispatch `SIGN_IN_SUCCESS`. If something goes wrong, you set an error message.

This is not only easier for you to read, but it's _much_ easier for your coworkers to read as well. It also forces you to think about your state not as an object that's being changed, but as a "state machine" that's changed by actions.

Here's what your final result might look like:

```jsx
const LoginForm = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const { email, password, isLoading, errorMessage } = state;

  async function handleSubmit(e) {
    e.preventDefault();
    // before we send the request, change loading state
    dispatch({ type: 'START_SIGN_IN' });

    try {
      // send data to your API
      const response = await api.post('/login', { email, password })

      // if it's successful, toggle the loading boolean and set the data in state
      dispatch({ type: 'SIGN_IN_SUCCESS', payload: response.data });
    } catch (error) {
      // if something goes wrong, they shouldn't get stuck in the loading state
      dispatch({ type: 'SET_ERROR', payload: error.message });
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <fieldset disabled={isLoading}>
        <label>
          Email
          <input
            value={email}
            onChange={e =>
              dispatch({
                type: 'HANDLE_CHANGE',
                name: 'email',
                payload: e.target.value,
              })
            }
          />
        </label>
        <label>
          Password
          <input
            type="password"
            value={password}
            onChange={e =>
              dispatch({
                type: 'HANDLE_CHANGE',
                name: 'password',
                payload: e.target.value,
              })
            }
          >
        </label>
        {errorMessage !== null && <div>{errorMessage}</div>}
        <button type="submit">Sign In</button>
      </fieldset>
    </form>
  );
};
```

If you want to push this even further, you could even turn this reducer into a custom hook called something like `useRequest` and use it throughout your app.

Refactor Your Component's State with useReducer


If you’ve spent any amount of time configuring ESLint — the most widely used linting tool for JavaScript — you’ll know you can easily get lost in it.

But there are also formatters like Prettier, which are excellent but often fight with linters.

I strongly believe that a solid linting setup con save you tons of time and catch many bugs much sooner. The first time you save a file and it auto-formats like this, you'll see how powerful it is:

![GIF showing linting / formatting tools fixing code automatically](/images/autofix-example.gif)

After much trial and error, I’ve put together and setup I use for every project and published it for easier use.

### 1. Set Up Your Project

Make a new directory for your linting config and run either `yarn init -y` or `npm init -y` to create a `package.json`.

When publishing an ESLint config, all we need to export is an ESLint config object.

So let's make an `index.js` file with the following content:

```js
module.exports = {

}
```

And then install ES Lint:

```bash
yarn add eslint
# or
npm install --save eslint
```

### 2. Find a setup to use as a base

Instead of hand-picking every linter rule, I would strongly suggest finding an existing config and [extending it.](https://eslint.org/docs/user-guide/configuring#extending-configuration-files)

I would strongly recommend using React's official [eslint-config-react-app](https://github.com/facebook/create-react-app/tree/master/packages/eslint-config-react-app#usage-outside-of-create-react-app), but if you want to find more options you can check out [this repo.](https://github.com/dustinspecker/awesome-eslint).

For many years, I was a strong advocate for the AirBNB linting config, but recently I realized I'd been turning off many of their opinionated rules.

I finally removed it after reading [Dan Abramov’s](https://overreacted.io/writing-resilient-components/#marie-kondo-your-lint-config) advice on the topic:

> Don’t assume that whatever you or something somebody else added to your lint config a year ago is a “best practice”. Question it and look for answers. Don’t let anyone tell you you’re not smart enough to pick your lint rules.

If you do prefer more rules, then more power to you! But if you find they're getting in your way and not helping catch bugs, it might be time to part ways.

In case you do go with a different config (and you use React), make sure to include this [jsx accessibility](https://github.com/evcohen/eslint-plugin-jsx-a11y) plugin. Even if your primary focus isn't accessibility, I believe every project should have this by default even if it the rules seem frustrating at first.

Once you have your base, update your `index.js`:

```js
module.exports = {
  extends: ['react-app'] // or whatever you chose as your base config
}
```

### 3. Add Your Formatter

Now that we have our linter set up to catch code-related bugs, we're going to use [Prettier](https://prettier.io/) to consistently format our code.

First add these packages:
```bash
yarn add prettier eslint-config-prettier eslint-plugin-prettier
# or
npm install --save prettier eslint-config-prettier eslint-plugin-prettier
```

Here's what we've added:
- `prettier` - Used to run the formatting
- `eslint-config-prettier` - Turns off ESLint formatting rules that would conflict with Prettier
- `eslint-plugin-prettier` - Allows your ESLint config to run prettier

While the setup is a bit cumbersome, this will allow you to _just_ use ESLint to lint and format your code and keep you from having to use Prettier separately.

Now, update your `index.js` again:

```js
module.exports = {
  extends: [
    'react-app', // or whatever you chose as your base config
    'plugin:prettier/recommended', // this will stop Prettier and ESLint from fighting over fixes
    'prettier/react', // optionally include this if you use React
  ],
  'plugins': ['prettier'],
  'rules': {
    // make Prettier return errors
    'prettier/prettier': [
      'error',
      {
        // Optional Prettier config changes
        trailingComma: 'es5',
        singleQuote: true,
        printWidth: 80,
      },
    ],
  }
}
```

### 4. Publishing

To publish this config, you'll need to update a few things in your `package.json`:

```js
{
  // must start with "eslint-config" for other people to include it
  "name": "eslint-config-my-cool-config",
  // this must be increased every time you publish
  "version": "1.0.0",
  // this tells node where to find the main module when it's installed
  "main": "index.js",
}
```

Then, make sure you have an account with [NPM](https://www.npmjs.com) and follow their guide to [publish a package](https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages#publishing-unscoped-public-packages).

Once it's successful, you should be able to go to any Javascript project using NPM and run:

```bash
yarn add eslint-config-my-cool-config
# or
npm install --save eslint-config-my-cool-config
```

And then extend your own config by making a `.eslintrc` file in the root of your project:

```js
{
  // don't include the `eslint-config-` part when extending
  "extends": ["my-cool-config"]
}
```

### 5. Super Charge Your Text Editor

If you aren't sold on the benefits of all this setup yet, this is where you'll start to see how helpful this is.

Your text editor should have an official [ESLint integration](https://eslint.org/docs/user-guide/integrations#editors), but for this example we're going to set it up in VS Code.

Install the [VSCode ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and then open the command pallette (`cmd / ctrl + shift + p`) and type `settings json` and select `Open Settings (JSON)`.

At the end of the settings JSON, add this:

```js
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
```

Now when you save a file it should automatically run eslint fixes, which also include our Prettier formatting and save you hours of headache in the future.

Finally, don't forget that if you end up changing your mind about any rules, you can always override them in your `.eslintrc` project's config file:

```js
{
  // don't include the `eslint-config-` part when extending
  "extends": ["my-cool-config"],
  "rules": {
    // 0 turns the rule off, 1 emits a console warning and 2 throws an error
    "overly-opinionated-rule": 0
  }
}
```

Or change them in your custom config package (just remember you'll have to publish it afterward):

```js
{
  "extends": ["base-config"],
  "rules": {
    "overly-opinionated-rule": 0
  }
}
```

Stop wasting time fixing those semicolons and spaces

Creating a Sane ESLint Config


As you start writing more in React, it's easy to lose sight of how to do things "outside" of React.

For example, if you had a React modal prompting the user to log in, but you wanted to be able to "trigger" that modal from some separate Javascript (maybe from a script tag added by an outside source), how would you do that?

You might get caught up in a React-sounding solution:

```jsx
function App() {
  function openModal() {
    // ...other code to open modal
  }

  useEffect(() => {
    // whenever openModal changes, you can bind it to the window?
    window.openModal = openModal;
  }, [openModal])

  // ... rest of the component
}
```

And while this might work in some simpler cases, we're putting a function in the global scope and it's likely that we'll run into bugs if certain things change.

Instead, we should reach for a Javascript feature designed for situations like this: [Custom Events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events).

---

When breaking down this problem, there are two main parts:
- We want our app to "listen" and respond to an outside event
- Code outside our app must be able to "trigger" this listener

If this sounds familiar, it's because we use the same [Observer Pattern](https://en.wikipedia.org/wiki/Observer_pattern) for HTML elements:

```html
<body>
  <button>Alert!</button>
  <script>
    const button = document.querySelector('#button');

    // we add our listener here, and the "click" event is our trigger
    button.addEventListener('click', () => {
      // when the even is triggered, we run this code
      alert('Button Clicked!');
    });
  </script>
</body>
```




https://codesandbox.io/s/custom-events-m95t5?view=split&fontsize=12

Linking React and vanilla Javascript using custom events

How to Call React Code from Outside React


After getting an Ender 3, my involvement in 3D printing had mostly been confined to printing things off [Thingiverse](http://thingiverse.com/).

Any time I would try to model something in any sort of 3D modeling "CAD" (computer-aided design) software, I'd immediately get lost in the UI.

When I was looking through some 3d models, I was curious about some that could be "customized" with given parameters.

I found out this was mainly done with [OpenSCAD](https://www.openscad.org/). This tool allows you to use _code_ to define the objects you're designing, and let's you use loops, condition statements, parameters and functions to create models. You create customizable models by defining variables that can be altered by the user.

For example, I customized a [headphone holder](https://www.thingiverse.com/thing:3888771) for my desk at work. All I had to do was measure the depth of my desk and provide it to the [Customizer](https://www.thingiverse.com/apps/customizer).

And this made perfect sense: When you define a 3D model as a function, any user input is just a parameter that you can use to change it.

Here are the basics that I learned to model a few simple things like a marker holder and a [board game piece holder](https://www.thingiverse.com/thing:3955665) for [Pandemic Legacy](https://www.zmangames.com/en/products/pandemic-legacy-season-1/) (OpenSCAD also has a great [cheatsheet](https://www.openscad.org/cheatsheet/index.html) of their own, but it doesn't come with examples).

## Basics

OpenSCAD uses its own language, but if you've used any C-like languages (including Javascript, Java or any flavor of C) it should look mostly familiar.

### Cube

We'll start with a simple one. The `cube` function can accept either one `integer` or an array of three integers which will be used in order for `[width, depth, height]` (all units are in millimeters).

```js
cube(3); // => this will create a 3x3x3mm cube
```

### Text

Text is also pretty straightforward: The first parameter is the string of text you want to render, and then the other parameters are for options like size, font and alignment.

```js
cube([50, 14, 1]);

translate([0, 1, 1]) {
  // this function increases the height of the text by 1
  linear_extrude(height = 1) {
    text("Hello World", font="Futura");
  }
}
```

![3D Modeled Text Example](/images/text_example.png)
<br />

## Functions / Operations

There are several common functions that can be used to manipulate shapes into the different models you might try to create.

### Translate

Translate is mostly self-explanatory: It will move your object between the X, Y and Z axis in the 3D "space".

```js
// move the contents of this function 3 mm "forward" along the X axis
translate([3, 0, 0]) {
  cube(3)
}
```

### Difference

Let's say you wanted to create a small model to hold things in a box. To create the "opening", you can use the `difference()` function.

`difference()` takes the first "shape" that's passed to it and "removes" all the subsequent items.

So if you had a 10x10x10mm cube, you could make a smaller box inside of it to

```js
difference() {
    cube(10, center=true); // this is the initial shape
    // all items following are "removed" from the initial one

    // so let's make a slightly smaller cube and translate it slightly to be inside the other cube
    translate([0, 0, 2]) {
        cube(9, center=true);
    }
}
```

## Putting It All Together

Let's put all these ideas together with an example. We'll and make a tray that holds 18 same-sized board game pieces for the game Pandemic ([here's a link](https://www.thingiverse.com/thing:3955665) to the final result).

After measuring the piece, I found they had these dimensions:

| Dimension | Value |
| :---: | :---: |
| X (width): | 14mm |
| Y (length): | 9.5mm |
| Z (height / depth): | 12mm |

To make a bit of room for each piece, we'll round up a bit and use these dimensions for each "space":

```js
cube([15, 10, 13]);
```

Then we just have to "subtract" that space from a cube:

```js
difference() {
  // first we'll make the base tray, using these XYZ dimensions
  cube([53, 70, 8]);

  // we'll going to loop over 3 rows (we use 0:2 because arrays start at 0)
  for (row=[0:2]) {
    // and have 6 columns
    for (column=[0:5]) {
      // for the X axis, we're going to space the pieces 17mm apart for each row
      // the `+ 2` for the X axis adds padding on the edges
      // for the Y axis, we'll do the same but space them 11mm apart
      // we keep the Z axis the same since all of the spaces will be at the same height
      translate([row * 17 + 2, column * 11 + 2, 3]) {
        cube([15, 10, 13]);
      }
    }
  }
}
```

Here's the end result:

![Pandemic board game piece holder](https://cdn.thingiverse.com/assets/68/63/77/b6/15/featured_preview_pandemic-building-holder.stl)


[Thingiverse Link](https://www.thingiverse.com/thing:3955665)

With some refactoring, I could make this accept variables and hold any number of different-sized board game pieces. But maybe I'll get to that another day.

3D Modeling With Code


React Context has come a long way since its stable release almost a year and a half ago.

The [context API](https://reactjs.org/docs/context.html) is designed to allow state to be shared between components, and it's a great choice for storing things like a "global" setting (such as theme color) or data about the current user.

Now with the release of [React hooks](https://reactjs.org/docs/hooks-intro.html), you no longer have to use the "render prop" pattern to access state globally.

For this example we'll say that we have a current user in an app and we want to display their name in multiple places.

### Setup

First we need to call `React.createContext()`, which will return a `Consumer` and `Provider`.

A Context Provider is a component that allows all components inside of it to access the shared state. The consumer is then used to access the data from the provider.

Usually it's best to put these all in their own file, so we'll call it `UserContext.js`

```js
import React, { useState, createContext } from 'react';

const UserContext = createContext();
```

Next, we'll create a provider component we can use at the root of our app. We'll also give it some state to store the user object later, because our `UserProvider` is just another React component.

```jsx
function UserProvider({ children }) {
  const [user, setUser] = useState(null);

  return (
    <UserContext.Provider
      value={{
        user: user,
        setUser: setUser,
      }}
    >
      {children}
    </UserContext.Provider>
  )
}

// you can also create this helper to avoid having to import two things to use this context
const useUserContext = () => {
  useContext(UserContext);
}

export { UserProvider, UserContext, useUserContext };
```

Here we set the value on the provider by passing it the `value` prop and giving it the data we want to make available to other components. We're also passing `setUser`, which will allow us to change the state of the provider from other components.

Now in the root of our app (usually something like `App.js` or `index.js`), we can add this provider:

```jsx
import { UserProvider } from './UserContext';

const App = () => {
  return (
    <UserProvider>
      {/* all the other stuff from your app... */}
    </UserProvider>
  )
}
```

So if we had a login page where we were getting information about the current user from an API, we would want to store that in our `UserProvider`.

To do that, we use the [useContext](https://reactjs.org/docs/hooks-reference.html#usecontext) hook and pass it our `UserContext`.

```jsx{3-4,11}
import { UserContext } from './UserContext';
const LoginPage = () => {
  const context = useContext(UserContext);
  const { setUser } = context;

  const handleLogin = async () => {
    // get some data from your API...
    const res = { name: 'Eleven' }

    // and set it to context
    setUser(res)
  }

  // the rest of your component would go here
}
```

So now, if we had a navigation component that displayed the current user's name, we could do this:

```jsx
const NavBar = () => {
  const context = useContext(UserContext);
  const { user } = context;

  return (
    <nav>
      {user.name} {/* => 'Eleven' */}
    </nav>
  )
}
```

Using React Context (Now With Hooks)


The [release of React's 16.6](https://reactjs.org/blog/2018/10/23/react-v-16-6.html) minor version bump came with some new React tools for React developers. Since it's a only a [minor version](https://semver.org/), React teams should feel comfortable upgrading because there aren't any breaking changes -- only new features and bugfixes.

## [Context Type](https://reactjs.org/docs/context.html#classcontexttype)

This is, in my opinion, the most exciting addition in 16.6.

The context API had its stable release in 16.3, but one feature it sacrificed was removing `this.context` as a way to interact with context. This feature has been missed among [developers who are uncertain if render props are the right direction](https://twitter.com/mjackson/status/1052681036709093377) to go in.

With 16.6, you can now declare a `contextType` in a component and then access `this.context` to get the context from your provider without having to pass down render props.

It's important to note that the context value is from the *closest matching Provider* above your current component in the tree.

So you'll still have to wrap your entire app (or at least your component) in your Provider, but then that provider is easily accessed with `this.context`.

For example, if you have a simple counter that's using state in a context provider, you'd previously have to do something like this to render it:

```jsx
const VoteContext = React.createContext();

const VoteCount extends Component {
  render() {
    return (
      <VoteContext.Consumer>
        {context => (
          <div>{context.state.count}</div>
        )}
      </VoteContext.Consumer>
    )
  }
}

```

Now, you can either add `static contextType` or add `.contextType` if you aren't using static class fields.

```jsx
const VoteContext = React.createContext();

class VoteCount extends Component {
  static contextType = VoteContext
  render() {
   return (
     <div>{this.context.state.count}</div>
   )
  }
}
```

If you want to see an example in action, I [created this CodeSandbox](https://codesandbox.io/s/n560yp5xx4) to demonstrate how to use contextType.

## [Memo](https://reactjs.org/docs/react-api.html#reactmemo)

Although the name of this new API has been met with [mixed feedback](https://twitter.com/dan_abramov/status/1054930594143109120), the Memo API is essentially a wrapper / higher-order component that provides the benefits of a [Pure Component](https://reactjs.org/docs/react-api.html#reactpurecomponent) to function components.

There's been plenty written about the [benefits of Pure Components,](https://medium.com/groww-engineering/stateless-component-vs-pure-component-d2af88a1200b). The short version is that Pure Components can provide a performance boost by preventing a component from re-rendering if the props don't change. But be warned, if you're using deeply nested data, Pure Components only do a shallow check for performance reasons, so try to limit it to simple data or use [immutable objects.](https://facebook.github.io/immutable-js/).

Anyway, enough theory, let's see it in an example.

Let's say you have a stateless component that just displays a user's name and avatar in the top right of a dashboard. You have a simple functional component because it doesn't need to have state, it just needs to render out its props:

```jsx
function UserInfo(props) {
  const { name, avatar } = props;
  return (
    <div>
      <img src={avatar} alt={`${name}'s avatar`} />
      <span>{name}</span>
    </div>
  )
}
```

Now let's say you have this component and a "search" input component both in the header of your site.

Each time your user types into the input and changes the input of your header, `UserInfo` is going to actually trigger a re-render, even if the props for the UserInfo component don't change.

If you're already using a full React component, it'd be easy to switch over to `React.PureComponent` and remove this unnecessary render. But now with `Memo`, you can leverage that same performance boost with your functional components:

```jsx
const UserInfoMemo = React.memo((props) => {
 const { name, avatar } = props;
  return (
   <div className="user-info">
     <img src={avatar} alt={`${name}'s avatar`} />
     <span>{name}</span>
   </div>
  );
});
```

I created [this quick CodeSandbox](https://codesandbox.io/s/2x5z13y4p?expanddevtools=1) to demonstrate the differences. Type into the search input and notice how `UserInfoNormal` is actually re-rendering on every keystroke, even though the props aren't changing. Compare that to `UserInfoMemo`, which is only doing one initial render and not re-rendering when the main App component's state is changing.

## [React.lazy code-splitting](https://reactjs.org/docs/code-splitting.html#reactlazy)

Now, just be warned, this is a feature “from the future” that’s mainly intended to set things up for the upcoming release of React Suspense. Also, this feature isn’t available for server-side rendering just yet, so don’t try and mix this into NextJS (which luckily does code-splitting by default, anyway).

Code splitting tries to solve one of the trickier issues with monolithic Javascript apps: the dreaded Bundle Size.

`React.lazy` allows you to only load components _when they need to be rendered._

That means when you load into any page on your React app, you don’t have to load the source code for every single other component that exists in your app.

What this means is you can drastically increase initial loading speeds for React apps using a built-in APIs (although the React blog notes that [React-Loadable](https://github.com/jamiebuilds/react-loadable) is still a great options and currently offers server-side rendering).

Although the benefits of this API are a bit complicated, the implementation extremely easy. Below is the example from the official React docs, since it’s fairly straightforward.

```jsx
// Before
import OtherComponent from './OtherComponent';

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}

// After
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}
```

Something to be cautious about, however, is that when `MyComponent` is initially rendered with `React.lazy` wrapping `OtherComponent`, the inner OtherComponent will initially render nothing while it loads in the source.

The `React.lazy` docs provide a solution: Using the even newer `<Suspense />` component.

I haven’t included `Suspense` in this list because it may be confused with the upcoming asynchronous [React Suspense](https://www.youtube.com/watch?v=nLF0n9SACd4) release, but for now the Suspense component can be used to provide a fallback while loading in component asynchronously.

What's New in React 16.6 By Example



React's [context API](https://reactjs.org/docs/context.html) has been stable for about six months now (at time of writing). And while there are several [good guides](https://wesbos.com/react-context/) about the basics, I've struggled to find practical examples and suggested design patterns for Context.

In my personal usage, I've found it to be a great stand-in for state containers like Redux. Instead of having to create boilerplate for reducers, actions and stores, ultimately "Context" is just a component. It has state, it can have methods and it passes its state through props.

For this example, let's say we have a simple dashboard app for managing blog posts.

## Setup

First, we'll create a simple Provider and Consumer pair.

```jsx
const StoreContext = React.createContext();

class StoreProvider extends Component {
  constructor(props) {
    super(props);

    this.state = {
      user: 'Me'
    }
  }

  render() {
    return (
      <StoreContext.Provider
        value={{
          state: this.state,
        }}
      >
        {this.props.children}
      </StoreContext.Provider>
    );
  }
}

export const StoreConsumer = StoreContext.Consumer;

export default StoreProvider;
```

Using this example, you'll now have a file that exports both a provider and a consumer for your App's "store".

In this case, "store" is just referring to the parent component, which works like any other React component. You can give it a state, set the state, and create functions to make API calls and update the state.

In my experience, I find this much easier to work with than something like Redux, where you usually need reducers and actions and a lot of other boilerplate.

## Basic Usage

In the root of your app, usually `index.js`, put the `StoreProvider` component as high as possible.

```jsx
class App extends Component {
  render() {
    return (
      <StoreProvider>
        <Main />
      </StoreProvider>
    )
  }
}
```

Now, you can access your context anywhere in your app using the `StoreConsumer` and render props.

For example, if you want to display the current user in the top right it might be nested in several components.

Instead of having to pass props down several levels (also called [prop drilling](https://blog.kentcdodds.com/prop-drilling-bb62e02cb691?gi=9a8599aea1be)), you can instead just use the `StoreConsumer` to access it wherever you need it.

```jsx
import { StoreConsumer } from './StoreProvider';

const User = (props) => {
  return (
    <StoreConsumer>
      {(context) => (
        <span>{context.state.user}</span>
      )}
    </Storeconsumer>
  );
}
```

## Data Fetching

Instead of having to reach for [middleware](https://github.com/redux-saga/redux-saga), async data fetching with Context works just like it would in a normal component.

Let's say that we want to preserve someone's login state by checking `localStorage` for a token. If they have a valid token, then we want to fetch all their blog posts.

```jsx
class StoreProvider extends Component {
  state = {
    posts: [],
  }

  async componentDidMount() {
    const token = window.localStorage.getItem('auth-token');

    if (token) {
      const res = await axios.get('https://myapi.com/posts');
      this.setState({
        posts: res.data,
      });
    }
  }

  render() {
    return (
      <StoreContext.Provider
        value={{
          state: this.state,
        }}
      >
        {this.props.children}
      </StoreContext.Provider>
    );
  }
}
```

Now, `posts` are globally available to your app. Anywhere you need to access them, you can use your consumer and access the context's state.

If you need to refetch, you can just add a method to your context component and call it in your consumer.

```jsx
class StoreProvider extends Component {
  {/* ...same code as above */}
  async refetchData {
    const res = await axios.get('https:/myapi.com/posts');
    this.setState({ posts: res.data });
  }

  render() {
    return (
      <StoreContext.Provider
        value={{
          state: this.state,
        }}
        refetchData={this.refetchData}
      >
        {this.props.children}
      </StoreContext.Provider>
    );
  }
}
```

Make sure to pass your methods to your components as props, or else you won't be able to access your context's methods in the consumer.

## Higher Order Component

If you find it clunky / messy to do the whole [render prop](https://reactjs.org/docs/render-props.html) song and dance, you can append this [higher order component](https://reactjs.org/docs/higher-order-components.html) when you export your component.

This usage is similar to how [Redux uses `connect`](https://redux.js.org/basics/usagewithreact#implementing-container-components). Basically, you're extending the component's own props with the props from the context component.

```jsx
import { StoreConsumer } from './StoreProvider';

function withContext(WrapperComponent) {
  return class extends React.Component {
    render() {
      return (
        <StoreConsumer>
          {context => <WrapperComponent context={context} {...this.props} />}
        </StoreConsumer>
      );
    }
  };
}
```

So in your user component, you could change your export to this:

```jsx
export default withContext(User)
```

And then your `User` component would have all the context passed to it in a new `context` prop:

```jsx
const User = (props) => {
  const { context } = this.props;
  const { user } = context.state;
  return (
    <div>
      <span>{user}</span>
    </div>
  );
}
```


Practical Examples for React Context


In Austin Kleon's excellent book, [Steal Like An Artist](https://austinkleon.com/steal/), he outlines 10 rules to follow to produce great creative work. While all 10 rules are absolutely worth taking to heart, we're going to focus on the one the book is named after: Steal Like an Artist.

While the keyword of this rule, "steal" is mostly meant as a nod to the [Picasso quote](https://quoteinvestigator.com/2013/03/06/artists-steal/), "Good artists copy. Great artists steal", Kleon offers a more detailed approach to this process:


> You should always be consuming and taking notes about work in your field, and you should collect them to help develop your own taste and preferences


For Web Developers, the answer should be clear: Take notes from the websites you admire. Whether that's a UI choice, a CSS style trick or a user experience feature, you should collect these snippets of other sites and think through why you like them.

One of my first "Ah, ha!" moments as a web developer was when I was trying to make my first mobile hamburger menu for a client. I ended up making an ugly, peeling-downward hamburger menu that looked awkward and would paritally obscure text while it was unrolling.

Since I'm not a web designer myself, I turned to people who knew better than me: AirBNB. I checked their mobile site, and found an incredibly smooth slide-down hamburger menu. I inspected the menu, and found these glorious lines of CSS that I've used for many other projects:

```css
transform: translateY(0px);
transition: transform 304ms ease-out;
```

It was a simple approach, but I had no idea something like this could be so easy with CSS. All I had to do was apply a toggling "menu-active" class with some JavaScript and give my menu an initial value like `transform: translateY(-100%)`.

![poster-8-500x666](/images/steal-like-an-artist.gif)

From this snippet, I also created some horizontal hamburger menus by using `translateX` instead of `translateY`. By reworking this clever bit of CSS, I was able to create solutions for several different mobile menus.

Now whenever I see something I like on a site, I'll save it as a [Gist](https://gist.github.com/) for personal reference. And then next time I think "I need a mobile menu animation...", I have a toolbox full of snippets I can refer to.

For the more design-challenged developers (myself included), it's a huge relief to have a backlog of styling snippets at your disposal, especially when they were likely created by more experienced designers / developers.

Sanity Check

Refactor Your Component's State with useReducer

Creating a Sane ESLint Config

How to Call React Code from Outside React

3D Modeling With Code

Using React Context (Now With Hooks)