Playbook Appendix C - Programming Cheat Sheet

Playbook Appendix C - Programming Cheat Sheet

December 1, 2021

Cheatsheet for React, JavaScript, and other programming topics.

React State

There are 3 ways to store / manipulate primary state within Functional React:

  1. useState
  2. useReducer
  3. useContext
useState

Use it for simple data or data that doesn't need data updating logic distributed across many components.

const MyButtonTracker = () => {
const [ clicks, setClicks ] = useState(0)
return (
<button onClick={() => setClicks(c => c + 1)}>Clicked {clicks} times!</button>
)
}

As seen in the example above, useState returns an array with the current state at index 0, and the state updater at index 1. It accepts 1 parameter, which is the initial state.

useReducer

This is for more distributed state or for reusing state functionality across a few different components.

const trackingAction = Object.freeze({
increment: 'increment',
decrement: 'decrement',
reset: 'reset',
})
const unsignedTrackingReducer = (state, action) => {
switch(action.type) {
case trackingAction.increment: state === Number.MAX_SAFE_INTEGER ? state : state + 1
case trackingAction.decrement: return Math.max(state - 1, 0)
case trackingAction.reset: return 0
default: throw new Error(`Unknown type: ${action.type}`)
}
}
const useUnsignedTracking = () => useReducer(unsignedTrackingReducer, 0)
const IncrementButton = ({trackingDispatch}) => (
<button onClick={() => trackingDispatch({type: trackingAction.increment})}>Increment</button>
)
const DecrementButton = ({trackingDispatch}) => (
<button onClick={() => trackingDispatch({type: trackingAction.decrement})}>Decrement</button>
)
const Tracker = () => {
const [count, trackingDispatch] = useUnsignedTracking()
return (
<div style={{display: 'flex'}}>
<DecrementButton trackingDispatch={trackingDispatch} />
{count}
<IncrementButton trackingDispatch={trackingDispatch} />
</div>
)
}

Instead of passing a global setState which could corrupt the state to children, or passing hundreds of custom callbacks, we define a single reducer which outlines every way in which the state can be manipulated. This allows centralization of related business logic and keeps components clean.

Also, as seen in the example above, we were able to create a custom, reusable hook useUnsignedTracking with the reducer. Custom hooks must start with use for React to handle them properly.

useContext

This allows the sharing of state across many deeply nested components.

// in `useTheme.js`
const ThemeContext = createContext({
background: 'white',
})
const ThemeProvider = ({children, theme}) => (
<ThemeContext.Provider value={theme}>
{children}
</ThemeContext.Provider>
)
const useTheme = () => useContext(ThemeContext)
// App.js
const App = () => (
<ThemeProvider theme={{background: 'black'}}>
<ChildThatContainsDeeplyNestedChild />
</ThemeProvider>
)
// DeeplyNestedChild.js
const DeeplyNestedChild = () => {
const theme = useTheme()
return (
<div style={{
background: theme.background,
}} />
)
}

Context takes a minute to setup, but it allows data to be shared deeply without the transitory props for components that don't require it.

React Derived State

For derived state, use the following:

  1. variables
  2. props
  3. useMemo
  4. useCallback
variables
props
useMemo
useCallback

JavaScript Data Structures

Arrays
Sets
Maps
Generator Functions
Symbols

Mocha, Chai, Chai-Http

Functional Programming

Object-Oriented Programming


Contact Us


Don't forget to give us a follow!

© 2022 AIDIA LLC, all rights reserved.