JavaScript to Know for React
Photo by Benjamin Voros
What JavaScript features you should be familiar with when learning and using React
Current Available Translations:
One of the things I love most about React compared to other frameworks that I've used is how exposed you are to JavaScript when you're using it. There's no template DSL (JSX compiles to sensible JavaScript), the component API has only gotten simpler with the addition of React Hooks, and the framework offers you very little abstraction outside the core UI concerns it's intended to solve.
Because of this, learning JavaScript features is really advisable for you to be effective building applications with React. So here are a few JavaScript features I'd recommend you spend some time learning so you can be as effective as possible working with React.
Before we get into some syntax stuff, another thing that's really useful to understand for React is the concept of a function "closure". There's a great write-up of this concept here: whatthefork.is/closure.
Ok, let's get to the JS features you'll want to know for React.
Template Literals
Template literals are like regular strings with super-powers:
1const greeting = 'Hello'2const subject = 'World'3console.log(`${greeting} ${subject}!`) // Hello World!45// this is the same as:6console.log(greeting + ' ' + subject + '!')78// in React:9function Box({className, ...props}) {10 return <div className={`box ${className}`} {...props} />11}
Shorthand property names
This is so common and useful that I do this without thinking now.
1const a = 'hello'2const b = 423const c = {d: [true, false]}4console.log({a, b, c})56// this is the same as:7console.log({a: a, b: b, c: c})89// in React:10function Counter({initialCount, step}) {11 const [count, setCount] = useCounter({initialCount, step})12 return <button onClick={setCount}>{count}</button>13}
MDN: Object initializer New notations in ECMAScript 2015
Arrow functions
Arrow functions are another way to write functions in JavaScript, but they do
have a few semantic differences. Luckily for us in React land, we don't have to
worry about this
as much if we're using hooks in our project (rather than
classes), but the arrow function allows for terser anonymous functions and
implicit returns, so you'll see and want to use arrow functions plenty.
1const getFive = () => 52const addFive = a => a + 53const divide = (a, b) => a / b45// this is the same as:6function getFive() {7 return 58}9function addFive(a) {10 return a + 511}12function divide(a, b) {13 return a / b14}1516// in React:17function TeddyBearList({teddyBears}) {18 return (19 <ul>20 {teddyBears.map(teddyBear => (21 <li key={teddyBear.id}>22 <span>{teddyBear.name}</span>23 </li>24 ))}25 </ul>26 )27}
One thing to note about the example above is the opening and closing parentheses
(
. This is a common way to leverage the arrow function's implicit return capabilities when working with JSX.
Destructuring
Destructuring is probably my favorite JavaScript feature. I destructure objects
and arrays all the time (and if you're using useState
you probably are too,
like so). I love how
declarative it is.
1// const obj = {x: 3.6, y: 7.8}2// makeCalculation(obj)34function makeCalculation({x, y: d, z = 4}) {5 return Math.floor((x + d + z) / 3)6}78// this is the same as9function makeCalculation(obj) {10 const {x, y: d, z = 4} = obj11 return Math.floor((x + d + z) / 3)12}1314// which is the same as15function makeCalculation(obj) {16 const x = obj.x17 const d = obj.y18 const z = obj.z === undefined ? 4 : obj.z19 return Math.floor((x + d + z) / 3)20}2122// in React:23function UserGitHubImg({username = 'ghost', ...props}) {24 return <img src={`https://github.com/${username}.png`} {...props} />25}
Definitely read that MDN article. You are certain to learn something new. When you're done, try to refactor this to use a single line of destructuring:
1function nestedArrayAndObject() {2 // refactor this to a single line of destructuring...3 const info = {4 title: 'Once Upon a Time',5 protagonist: {6 name: 'Emma Swan',7 enemies: [8 {name: 'Regina Mills', title: 'Evil Queen'},9 {name: 'Cora Mills', title: 'Queen of Hearts'},10 {name: 'Peter Pan', title: `The boy who wouldn't grow up`},11 {name: 'Zelena', title: 'The Wicked Witch'},12 ],13 },14 }15 // const {} = info // <-- replace the next few `const` lines with this16 const title = info.title17 const protagonistName = info.protagonist.name18 const enemy = info.protagonist.enemies[3]19 const enemyTitle = enemy.title20 const enemyName = enemy.name21 return `${enemyName} (${enemyTitle}) is an enemy to ${protagonistName} in "${title}"`22}
Parameter defaults
This is another feature I use all the time. It's a really powerful way to declaratively express default values for your functions.
1// add(1)2// add(1, 2)3function add(a, b = 0) {4 return a + b5}67// is the same as8const add = (a, b = 0) => a + b910// is the same as11function add(a, b) {12 b = b === undefined ? 0 : b13 return a + b14}1516// in React:17function useLocalStorageState({18 key,19 initialValue,20 serialize = v => v,21 deserialize = v => v,22}) {23 const [state, setState] = React.useState(24 () => deserialize(window.localStorage.getItem(key)) || initialValue,25 )2627 const serializedState = serialize(state)28 React.useEffect(() => {29 window.localStorage.setItem(key, serializedState)30 }, [key, serializedState])3132 return [state, setState]33}
Rest/Spread
The ...
syntax can be thought of as kind of a "collection" syntax where it
operates on a collection of values. I use it all the time and strongly recommend
you learn how and where it can be used as well. It actually takes different
meanings in different contexts, so learning the nuances there will help you.
1const arr = [5, 6, 8, 4, 9]2Math.max(...arr)3// is the same as4Math.max.apply(null, arr)56const obj1 = {7 a: 'a from obj1',8 b: 'b from obj1',9 c: 'c from obj1',10 d: {11 e: 'e from obj1',12 f: 'f from obj1',13 },14}15const obj2 = {16 b: 'b from obj2',17 c: 'c from obj2',18 d: {19 g: 'g from obj2',20 h: 'g from obj2',21 },22}23console.log({...obj1, ...obj2})24// is the same as25console.log(Object.assign({}, obj1, obj2))2627function add(first, ...rest) {28 return rest.reduce((sum, next) => sum + next, first)29}30// is the same as31function add() {32 const first = arguments[0]33 const rest = Array.from(arguments).slice(1)34 return rest.reduce((sum, next) => sum + next, first)35}3637// in React:38function Box({className, ...restOfTheProps}) {39 const defaultProps = {40 className: `box ${className}`,41 children: 'Empty box',42 }43 return <div {...defaultProps} {...restOfTheProps} />44}
ESModules
If you're building an app with modern tools, chances are it supports modules, it's a good idea to learn how the syntax works because any application of even trivial size will likely need to make use of modules for code reuse and organization.
1export default function add(a, b) {2 return a + b3}45/*6 * import add from './add'7 * console.assert(add(3, 2) === 5)8 */910export const foo = 'bar'1112/*13 * import {foo} from './foo'14 * console.assert(foo === 'bar')15 */1617export function subtract(a, b) {18 return a - b19}2021export const now = new Date()2223/*24 * import {subtract, now} from './stuff'25 * console.assert(subtract(4, 2) === 2)26 * console.assert(now instanceof Date)27 */2829// dynamic imports30import('./some-module').then(31 allModuleExports => {32 // the allModuleExports object will be the same object you get if you had33 // used: import * as allModuleExports from './some-module'34 // the only difference is this will be loaded asynchronously which can35 // have performance benefits in some cases36 },37 error => {38 // handle the error39 // this will happen if there's an error loading or running the module40 },41)4243// in React:44import React, {Suspense, Fragment} from 'react'4546// dynamic import of a React component47const BigComponent = React.lazy(() => import('./big-component'))48// big-component.js would need to "export default BigComponent" for this to work
As another resource, I gave a whole talk about this syntax and you can watch that talk here
Ternaries
I love ternaries. They're beautifully declarative. Especially in JSX.
1const message = bottle.fullOfSoda2 ? 'The bottle has soda!'3 : 'The bottle may not have soda :-('45// is the same as6let message7if (bottle.fullOfSoda) {8 message = 'The bottle has soda!'9} else {10 message = 'The bottle may not have soda :-('11}1213// in React:14function TeddyBearList({teddyBears}) {15 return (16 <React.Fragment>17 {teddyBears.length ? (18 <ul>19 {teddyBears.map(teddyBear => (20 <li key={teddyBear.id}>21 <span>{teddyBear.name}</span>22 </li>23 ))}24 </ul>25 ) : (26 <div>There are no teddy bears. The sadness.</div>27 )}28 </React.Fragment>29 )30}
I realize that ternaries can get a knee-jerk reaction of disgust from some people who had to endure trying to make sense of ternaries before prettier came along and cleaned up our code. If you're not using prettier already, I strongly advise that you do. Prettier will make your ternaries much easier to read.
MDN: Conditional (ternary) operator
Array Methods
Arrays are fantastic and I use array methods all the time! I probably use the following methods the most frequently:
- find
- some
- every
- includes
- map
- filter
- reduce
Here are some examples:
1const dogs = [2 {3 id: 'dog-1',4 name: 'Poodle',5 temperament: [6 'Intelligent',7 'Active',8 'Alert',9 'Faithful',10 'Trainable',11 'Instinctual',12 ],13 },14 {15 id: 'dog-2',16 name: 'Bernese Mountain Dog',17 temperament: ['Affectionate', 'Intelligent', 'Loyal', 'Faithful'],18 },19 {20 id: 'dog-3',21 name: 'Labrador Retriever',22 temperament: [23 'Intelligent',24 'Even Tempered',25 'Kind',26 'Agile',27 'Outgoing',28 'Trusting',29 'Gentle',30 ],31 },32]3334dogs.find(dog => dog.name === 'Bernese Mountain Dog')35// {id: 'dog-2', name: 'Bernese Mountain Dog', ...etc}3637dogs.some(dog => dog.temperament.includes('Aggressive'))38// false3940dogs.some(dog => dog.temperament.includes('Trusting'))41// true4243dogs.every(dog => dog.temperament.includes('Trusting'))44// false4546dogs.every(dog => dog.temperament.includes('Intelligent'))47// true4849dogs.map(dog => dog.name)50// ['Poodle', 'Bernese Mountain Dog', 'Labrador Retriever']5152dogs.filter(dog => dog.temperament.includes('Faithful'))53// [{id: 'dog-1', ..etc}, {id: 'dog-2', ...etc}]5455dogs.reduce((allTemperaments, dog) => {56 return [...allTemperaments, ...dog.temperament]57}, [])58// [ 'Intelligent', 'Active', 'Alert', ...etc ]5960// in React:61function RepositoryList({repositories, owner}) {62 return (63 <ul>64 {repositories65 .filter(repo => repo.owner === owner)66 .map(repo => (67 <li key={repo.id}>{repo.name}</li>68 ))}69 </ul>70 )71}
Nullish coalescing operator
If a value is null
or undefined
, then you may want to fallback to some
default value:
1// here's what we often did for this:2x = x || 'some default'34// but this was problematic for numbers or booleans where "0" or "false" are valid values56// So, if we wanted to support this:7add(null, 3)89// here's what we had to do before:10function add(a, b) {11 a = a == null ? 0 : a12 b = b == null ? 0 : b13 return a + b14}1516// here's what we can do now17function add(a, b) {18 a = a ?? 019 b = b ?? 020 return a + b21}2223// in React:24function DisplayContactName({contact}) {25 return <div>{contact.name ?? 'Unknown'}</div>26}
MDN: Nullish coalescing operator
Optional chaining
Also known as the "Elvis Operator," this allows you to safely access properties and call functions that may or may not exist. Before optional chaining, we used a hacky-workaround that relied on falsy/truthy-ness.
1// what we did before optional chaining:2const streetName = user && user.address && user.address.street.name34// what we can do now:5const streetName = user?.address?.street?.name67// this will run even if options is undefined (in which case, onSuccess would be undefined as well)8// however, it will still fail if options was never declared,9// since optional chaining cannot be used on a non-existent root object.10// optional chaining does not replace checks like if (typeof options == "undefined")11const onSuccess = options?.onSuccess1213// this will run without error even if onSuccess is undefined (in which case, no function will be called)14onSuccess?.({data: 'yay'})1516// and we can combine those things into a single line:17options?.onSuccess?.({data: 'yay'})1819// and if you are 100% certain that onSuccess is a function if options exists20// then you don't need the extra ?. before calling it. Only use ?. in situations21// where the thing on the left might not exist.22options?.onSuccess({data: 'yay'})2324// in React:25function UserProfile({user}) {26 return (27 <div>28 <h1>{user.name}</h1>29 <strong>{user.bio?.slice(0, 50)}...</strong>30 </div>31 )32}
A word of caution around this is that if you find yourself doing ?.
a lot in
your code, you might want to consider the place where those values originate and
make sure they consistently return the values they should.
Promises and async/await
This one's a big subject and it can take a bit of practice and time working with them to get good at them. Promises are everywhere in the JavaScript ecosystem and thanks to how entrenched React is in that ecosystem, they're everywhere there as well (in fact, React itself uses promises internally).
Promises help you manage asynchronous code and are returned from many DOM APIs as well as third party libraries. Async/await syntax is a special syntax for dealing with promises. The two go hand-in-hand.
1function promises() {2 const successfulPromise = timeout(100).then(result => `success: ${result}`)34 const failingPromise = timeout(200, true).then(null, error =>5 Promise.reject(`failure: ${error}`),6 )78 const recoveredPromise = timeout(300, true).then(null, error =>9 Promise.resolve(`failed and recovered: ${error}`),10 )1112 successfulPromise.then(log, logError)13 failingPromise.then(log, logError)14 recoveredPromise.then(log, logError)15}1617function asyncAwaits() {18 async function successfulAsyncAwait() {19 const result = await timeout(100)20 return `success: ${result}`21 }2223 async function failedAsyncAwait() {24 const result = await timeout(200, true)25 return `failed: ${result}`26 }2728 async function recoveredAsyncAwait() {29 let result30 try {31 result = await timeout(300, true)32 return `failed: ${result}` // this would not be executed33 } catch (error) {34 return `failed and recovered: ${error}`35 }36 }3738 successfulAsyncAwait().then(log, logError)39 failedAsyncAwait().then(log, logError)40 recoveredAsyncAwait().then(log, logError)41}4243function log(...args) {44 console.log(...args)45}4647function logError(...args) {48 console.error(...args)49}5051// This is the mothership of all things asynchronous52function timeout(duration = 0, shouldReject = false) {53 return new Promise((resolve, reject) => {54 setTimeout(() => {55 if (shouldReject) {56 reject(`rejected after ${duration}ms`)57 } else {58 resolve(`resolved after ${duration}ms`)59 }60 }, duration)61 })62}6364// in React:65function GetGreetingForSubject({subject}) {66 const [isLoading, setIsLoading] = React.useState(false)67 const [error, setError] = React.useState(null)68 const [greeting, setGreeting] = React.useState(null)6970 React.useEffect(() => {71 async function fetchGreeting() {72 try {73 const response = await window.fetch('https://example.com/api/greeting')74 const data = await response.json()75 setGreeting(data.greeting)76 } catch (error) {77 setError(error)78 } finally {79 setIsLoading(false)80 }81 }82 setIsLoading(true)83 fetchGreeting()84 }, [])8586 return isLoading ? (87 'loading...'88 ) : error ? (89 'ERROR!'90 ) : greeting ? (91 <div>92 {greeting} {subject}93 </div>94 ) : null95}
Conclusion
There are of course many language features which are useful when building React apps, but these are some of my favorites that I find myself using again and again. I hope you find this useful.
If you'd like to dive into any of these further, I do have a JavaScript workshop which I gave and recorded while I was working at PayPal which you may find helpful: ES6 and Beyond Workshop at PayPal
Good luck!