Learning Backwards

Learning Computer Science Through the Lens of React

About Me

Do I Need to Learn Computer Science?

¯\_(ツ)_/¯

Story Time

Indulge me in a brief anecdote, please.

Probably At Some Point

Learning some computer science won't hurt your career. It augments your day-to-day working knowledge.

It also can help you pass technical interviews more often.

Hopefully, better jobs => better life.

Big O Notation

How Bad Can My Code Be?

What is Big O Notation?

"Big O Notation" is a standard way of describing the worst-case performance of an algorithm in regards to time and/or space.

Ok... But What's An Algorithm?

Good question!

An algorithm is a procedure for solving a problem. That's it. Nothing scary. It's a step-by-step way of going from start to finish.

O(1)

const foo = () => 'foo'

const first = arr => arr[0]

const prop = (key, obj) => obj[key]

O(N)

const arr = [1, 2, 3, 4, 5]

arr.forEach()
arr.map()
arr.find()
arr.reduce()

O(N^2)

const arr = [1, 2, 3, 4, 5]

const twoDArray = arr.map(n => arr.map(m => m * n))
console.log(twoDArray)
// [[1, 2, 3, 4, 5],
//  [2, 4, 6, 8, 10],
//  [3, 6, 9, 12, 15],
//  [4, 8, 12, 16, 20],
//  [5, 10, 15, 20, 25]]

O(2^N)

const fib = n => {
  if (n < 2) {
    return 1
  }

  return fib(n - 1) + fib(n - 2)
}

O(log N)

const binarySearch = (value, tree) => {
  const { left, right, value: rootValue } = tree.root

  return value === rootValue
    ? root
    : value < rootValue
      ? binarySearch(value, left)
      : binarySearch(value, right)
}

Tips to Remember

  • Drop Coefficients
  • Look for the Loops
  • Divide and Conquer When Possible

How Does This Impact React Apps

  • Don't worry about needing to map/filter/reduce a few times (unless N is very big)
  • Don't block the thread with big calculations, handle asynchronously
  • Use the right data structure for the job

Data Normalization

Or the Art of Making Tradeoffs

Knowing What We Know...

We now recognize that certain data structures might be better suited for a task than others. One typical problem are finds on lists. How can we overcome this?

By Turning Our Arrays Into Objects!!!

// Create a normalizing function for IDs

const normalizeByID = arr => arr.reduce((acc, cur) => {
  acc[cur.id] = cur
  return acc
}, {})

Live Coding Time!!!

Kinda. Live for me. Taped for you.

const list = [
  { id: 1, name: 'Kyle' },
  { id: 2, name: 'Anna' },
  { id: 3, name: 'Krios' },
  { id: 4, name: 'Tali' }
]

console.log(normalizeByID(list))
// {
//   '1': { id: 1, name: 'Kyle' },
//   '2': { id: 2, name: 'Anna' },
//   '3': { id: 3, name: 'Krios' },
//   '4': { id: 4, name: 'Tali' }
// }

What Did We Do?

We traded space for time.

We changed finding an item by ID from of O(n) to O(1).

How I Stumbled Upon Normalizing Redux State

Memoization

No, That's Not a Typo

What is memoization?

Memoization is the use of a cache within a function to store previously calculated results for retrieval. We trade space for the time cost of recalculating the result again.

const memo = fn => {
  const cache = {}

  return (...args) => {
    const stringifiedArgs = args.join('')

    if (cache[stringifiedArgs]) {
      return cache[stringifiedArgs]
    }

    const result = fn(...args)
    cache[stringifiedArgs] = result
    return result
  }
}

How does this work?

  • memo accepts a function as an argument
  • Returns a new function accepting any number of arguments
  • Stringifies those arguments to use as a key for the cache
  • If the result is in the cache, return it, otherwise calculate it
  • Cache the result and return it

Live Coding Time!!!

Kinda. Live for me. Taped for you.

How Might We Use This In React?

  • Reselect uses memoization for faster state updates
  • Any pure function can be memoized, including SFCs
  • Complex states can be extracted from components and put into memoized reducers

Trees

The bane of JS interviews and why React works so damn well

What is a tree?

A tree is a graph data structure comprised of nodes with any number of children and no cycles.

Umm... what's a graph? And what's a cycle?

A graph is a data structure made up of nodes with "edges" between them. A cycle is when several nodes all point to one another.

A tree only has parent and child nodes, with no child nodes pointing to other child nodes.

The DOM and VDOM are Trees!!!

Every website* in the world is a tree data structure

*I haven't visited them all, so don't quote me on this 😝
<html>
  <head>
    <title>Learning Backwards</title>
  </head>
  <body>
    <p>Ain't it <strong>awesome</strong> learning backwards!</p>
  </body>
</html>

{
  value: html,
  children: [
    { value: head, children: [
      { value: title, children: ['Learning Backwards'] }
    ]},
    { value: body, children: [
      { value: p, children: [
        "Ain't it ",
        { value: strong, children: ['awesome'] },
        ' learning backwards!'
      ]}
    ]}
  ]
}

React.createElement('html', {}, [
  React.createElement('head', {}, [
    React.createElement('title', {}, [
      'Learning Backwards'
    ])
  ]),
  React.createElement('body', {}, [
    React.creactElement('p', {}, [
      "Ain't it ",
      React.createElement('strong', {}, [
        'awesome'
      ]),
      ' learning backwards!'
    ])
  ])
])

Live Coding Time!!!

Kinda. Live for me. Taped for you.

Binary Tree Traversal - In Order

const inOrderTraversal = visit => treeRoot => {
  inOrderTraversal(visit)(treeRoot.left)
  visit(treeRoot)
  inOrderTraversal(visit)(treeRoot.right)
}

Binary Tree Traversal - Pre Order

const inOrderTraversal = visit => treeRoot => {
  visit(treeRoot)
  inOrderTraversal(visit)(treeRoot.left)
  inOrderTraversal(visit)(treeRoot.right)
}

Binary Tree Traversal - Post Order

const inOrderTraversal = visit => treeRoot => {
  inOrderTraversal(visit)(treeRoot.left)
  inOrderTraversal(visit)(treeRoot.right)
  visit(treeRoot)
}

How might this help us in React?

  • Debugging
  • Optimizing Renders
  • Recursive functions for React elements
  • Compound Components

Takeaways!

aka Kyle's pre-conclusion ramblings 😝

Thank You!!!

Byteconf for hosting and you for listening!

@kyleshevlin