JavaScript to Know for React

1const greeting = 'Hello'
2const subject = 'World'
3console.log(`${greeting} ${subject}!`) // Hello World!
4
5// this is the same as:
6console.log(greeting + ' ' + subject + '!')
7
8// in React:
9function Box({className, ...props}) {
10  return <div className={`box ${className}`} {...props} />
11}

1const a = 'hello'
2const b = 42
3const c = {d: [true, false]}
4console.log({a, b, c})
5
6// this is the same as:
7console.log({a: a, b: b, c: c})
8
9// in React:
10function Counter({initialCount, step}) {
11  const [count, setCount] = useCounter({initialCount, step})
12  return <button onClick={setCount}>{count}</button>
13}

1const getFive = () => 5
2const addFive = a => a + 5
3const divide = (a, b) => a / b
4
5// this is the same as:
6function getFive() {
7  return 5
8}
9function addFive(a) {
10  return a + 5
11}
12function divide(a, b) {
13  return a / b
14}
15
16// 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}

1// const obj = {x: 3.6, y: 7.8}
2// makeCalculation(obj)
3
4function makeCalculation({x, y: d, z = 4}) {
5  return Math.floor((x + d + z) / 3)
6}
7
8// this is the same as
9function makeCalculation(obj) {
10  const {x, y: d, z = 4} = obj
11  return Math.floor((x + d + z) / 3)
12}
13
14// which is the same as
15function makeCalculation(obj) {
16  const x = obj.x
17  const d = obj.y
18  const z = obj.z === undefined ? 4 : obj.z
19  return Math.floor((x + d + z) / 3)
20}
21
22// in React:
23function UserGitHubImg({username = 'ghost', ...props}) {
24  return <img src={`https://github.com/${username}.png`} {...props} />
25}

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 this
16  const title = info.title
17  const protagonistName = info.protagonist.name
18  const enemy = info.protagonist.enemies[3]
19  const enemyTitle = enemy.title
20  const enemyName = enemy.name
21  return `${enemyName} (${enemyTitle}) is an enemy to ${protagonistName} in "${title}"`
22}

1// add(1)
2// add(1, 2)
3function add(a, b = 0) {
4  return a + b
5}
6
7// is the same as
8const add = (a, b = 0) => a + b
9
10// is the same as
11function add(a, b) {
12  b = b === undefined ? 0 : b
13  return a + b
14}
15
16// 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  )
26
27  const serializedState = serialize(state)
28  React.useEffect(() => {
29    window.localStorage.setItem(key, serializedState)
30  }, [key, serializedState])
31
32  return [state, setState]
33}

1const arr = [5, 6, 8, 4, 9]
2Math.max(...arr)
3// is the same as
4Math.max.apply(null, arr)
5
6const 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 as
25console.log(Object.assign({}, obj1, obj2))
26
27function add(first, ...rest) {
28  return rest.reduce((sum, next) => sum + next, first)
29}
30// is the same as
31function add() {
32  const first = arguments[0]
33  const rest = Array.from(arguments).slice(1)
34  return rest.reduce((sum, next) => sum + next, first)
35}
36
37// in React:
38function Box({className, ...restOfTheProps}) {
39  const defaultProps = {
40    className: `box ${className}`,
41    children: 'Empty box',
42  }
43  return <div {...defaultProps} {...restOfTheProps} />
44}

1export default function add(a, b) {
2  return a + b
3}
4
5/*
6 * import add from './add'
7 * console.assert(add(3, 2) === 5)
8 */
9
10export const foo = 'bar'
11
12/*
13 * import {foo} from './foo'
14 * console.assert(foo === 'bar')
15 */
16
17export function subtract(a, b) {
18  return a - b
19}
20
21export const now = new Date()
22
23/*
24 * import {subtract, now} from './stuff'
25 * console.assert(subtract(4, 2) === 2)
26 * console.assert(now instanceof Date)
27 */
28
29// dynamic imports
30import('./some-module').then(
31  allModuleExports => {
32    // the allModuleExports object will be the same object you get if you had
33    // used: import * as allModuleExports from './some-module'
34    // the only difference is this will be loaded asynchronously which can
35    // have performance benefits in some cases
36  },
37  error => {
38    // handle the error
39    // this will happen if there's an error loading or running the module
40  },
41)
42
43// in React:
44import React, {Suspense, Fragment} from 'react'
45
46// dynamic import of a React component
47const BigComponent = React.lazy(() => import('./big-component'))
48// big-component.js would need to "export default BigComponent" for this to work

1const message = bottle.fullOfSoda
2  ? 'The bottle has soda!'
3  : 'The bottle may not have soda :-('
4
5// is the same as
6let message
7if (bottle.fullOfSoda) {
8  message = 'The bottle has soda!'
9} else {
10  message = 'The bottle may not have soda :-('
11}
12
13// 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}

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]
33
34dogs.find(dog => dog.name === 'Bernese Mountain Dog')
35// {id: 'dog-2', name: 'Bernese Mountain Dog', ...etc}
36
37dogs.some(dog => dog.temperament.includes('Aggressive'))
38// false
39
40dogs.some(dog => dog.temperament.includes('Trusting'))
41// true
42
43dogs.every(dog => dog.temperament.includes('Trusting'))
44// false
45
46dogs.every(dog => dog.temperament.includes('Intelligent'))
47// true
48
49dogs.map(dog => dog.name)
50// ['Poodle', 'Bernese Mountain Dog', 'Labrador Retriever']
51
52dogs.filter(dog => dog.temperament.includes('Faithful'))
53// [{id: 'dog-1', ..etc}, {id: 'dog-2', ...etc}]
54
55dogs.reduce((allTemperaments, dog) => {
56  return [...allTemperaments, ...dog.temperaments]
57}, [])
58// [ 'Intelligent', 'Active', 'Alert', ...etc ]
59
60// in React:
61function RepositoryList({repositories, owner}) {
62  return (
63    <ul>
64      {repositories
65        .filter(repo => repo.owner === owner)
66        .map(repo => (
67          <li key={repo.id}>{repo.name}</li>
68        ))}
69    </ul>
70  )
71}

1// here's what we often did for this:
2x = x || 'some default'
3
4// but this was problematic for numbers or booleans where "0" or "false" are valid values
5
6// So, if we wanted to support this:
7add(null, 3)
8
9// here's what we had to do before:
10function add(a, b) {
11  a = a == null ? 0 : a
12  b = b == null ? 0 : b
13  return a + b
14}
15
16// here's what we can do now
17function add(a, b) {
18  a = a ?? 0
19  b = b ?? 0
20  return a + b
21}
22
23// in React:
24function DisplayContactName({contact}) {
25  return <div>{contact.name ?? 'Unknown'}</div>
26}

1// what we did before optional chaining:
2const streetName = user && user.address && user.address.street.name
3
4// what we can do now:
5const streetName = user?.address?.street?.name
6
7// this will run even if options is undefined (in which case, onSuccess would be undefined as well)
8const onSuccess = options?.onSuccess
9
10// this will run without error even if onSuccess is undefined (in which case, no function will be called)
11onSuccess?.({data: 'yay'})
12
13// and we can combine those things into a single line:
14options?.onSuccess?.({data: 'yay'})
15
16// and if you are 100% certain that onSuccess is a function if options exists
17// then you don't need the extra ?. before calling it. Only use ?. in situations
18// where the thing on the left might not exist.
19options?.onSuccess({data: 'yay'})
20
21// in React:
22function UserProfile({user}) {
23  return (
24    <div>
25      <h1>{user.name}</h1>
26      <strong>{user.bio?.slice(0, 50)}...</strong>
27    </div>
28  )
29}

1function promises() {
2  const successfulPromise = timeout(100).then(result => `success: ${result}`)
3
4  const failingPromise = timeout(200, true).then(null, error =>
5    Promise.reject(`failure: ${error}`),
6  )
7
8  const recoveredPromise = timeout(300, true).then(null, error =>
9    Promise.resolve(`failed and recovered: ${error}`),
10  )
11
12  successfulPromise.then(log, logError)
13  failingPromise.then(log, logError)
14  recoveredPromise.then(log, logError)
15}
16
17function asyncAwaits() {
18  async function successfulAsyncAwait() {
19    const result = await timeout(100)
20    return `success: ${result}`
21  }
22
23  async function failedAsyncAwait() {
24    const result = await timeout(200, true)
25    return `failed: ${result}`
26  }
27
28  async function recoveredAsyncAwait() {
29    let result
30    try {
31      result = await timeout(300, true)
32      return `failed: ${result}` // this would not be executed
33    } catch (error) {
34      return `failed and recovered: ${error}`
35    }
36  }
37
38  successfulAsyncAwait().then(log, logError)
39  failedAsyncAwait().then(log, logError)
40  recoveredAsyncAwait().then(log, logError)
41}
42
43function log(...args) {
44  console.log(...args)
45}
46
47function logError(...args) {
48  console.error(...args)
49}
50
51// This is the mothership of all things asynchronous
52function 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}
63
64// 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)
69
70  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  }, [])
85
86  return isLoading ? (
87    'loading...'
88  ) : error ? (
89    'ERROR!'
90  ) : greeting ? (
91    <div>
92      {greeting} {subject}
93    </div>
94  ) : null
95}