The average is the most commonly used metric we use to understand data and infer insights - it is also the most dangerous.
![beware_average](//images.ctfassets.net/vwq10xzbe6iz/12kJw6jBqfvjjSCHyMxUNm/2dbf7edf379236641095dffe09c670fb/beware_average.png)

# The Pitfall of the Average
The US Air Force began life in the late 1940s with a high rate of aircraft accidents and pilot fatalities (excluding combat losses) with 23.6 aircraft destroyed per 100,000 flying hours. This dramatically reduced to 4.3 by the end of the 1960s driven largely by the work of one man, Lieutenant Gilbert S. Daniels who saw the pitfall of using “the average” to design solutions.

> The tendency to think in terms of the “average man” is a pitfall…it is virtually impossible to find an “average man” in the Air Force population.
[Gilbert S Daniels (1952 US Air Force Report)](https://apps.dtic.mil/sti/citations/AD0010203)

US Army engineers had standardised the design of pilot cockpits to conform to the average dimensions of a 1926 pilot. This was revisited in the 1950s by Lt. Daniels who measured the bodily dimensions of more than 4,000 pilots and found that zero pilots matched the average dimensions.

The US Air Force responded and demanded that its manufacturers design its cockpits to be adjustable to individual dimensions vs the standardised average. As a consequence, both pilot performance and accident/ mishap rates dramatically improved.
![us_airforce](//images.ctfassets.net/vwq10xzbe6iz/6mtEbxaIXNU60Svdu9uGsO/3c61d041d241f4040e7269db2552b8eb/us_airforce.png)

# A Modern Example
A modern example of the pitfall of the average would be to look at user activity. Imagine we build software that helps users perform inspections and we are tasked with improving user engagement.

Looking at the data we find that the average count of monthly inspections performed by our active users is 32 inspections per month:

![table_inspections](//images.ctfassets.net/vwq10xzbe6iz/3SfYJ8CwfGsBPFptTVL3jB/44bd12fd8ec35a7fc0c8efe608a47ed3/table_inspections.png)

Knowing this, we can deduce that our users on average perform 32 inspections per month or approximately one inspection a day. We begin building solutions such as daily notifications to help remind our users to perform their daily inspection.

__Stop.__

Reducing a large data set into a single number can often mask useful information and give us the wrong answer. Instead we can look at the distribution of our data and graph the same data as a histogram to reveal how often each different value occurs in a dataset.
![histogram_inspections](//images.ctfassets.net/vwq10xzbe6iz/1UixJwtgp0xcrWIvV6I6J2/ce429dc02a478f3c49abb41f28b113bc/histogram_inspections.png)

Now looking at the distribution of our data we can see that none of our users perform the average number of 32 inspections per month. Instead we see that 60% of our users perform 10 or fewer inspections per month and a large group (+30% of users) perform 70 or more inspections per month.

The distribution of our data could suggest that the usage of our software differs widely by different cohorts of users. One cohort could be using it to perform monthly scheduled safety checks vs another cohort using it to perform factory line QA checks. 

Next time when using the average, pause before making any conclusions and ask: "How many instances of the data actually reflect the average?". 

__References:__
- [THE “AVERAGE MAN”? - Gilbert S Daniels (1952 US Air Force Report)](https://apps.dtic.mil/sti/citations/AD0010203)
- [Trends in U.S. Air Force Aircraft Mishap Rates (1950-2018) - Thomas Light, Thomas Hamilton, Spencer Pfeifer](https://www.rand.org/content/dam/rand/pubs/research_reports/RRA200/RRA257-1/RAND_RRA257-1.pdf) 
- [The End of Average - Todd Rose (2015)](https://www.penguin.com.au/books/the-end-of-average-9780141980034) 


The average is a myth. Understand the pitfalls of the average and how it can conceal useful information. How the US Air Force threw out the average and saved lives. Use distributions to better understand your data.

How the US Air Force Ditched the "Average" and Saved Lives

![whose_problem_is_it](//images.ctfassets.net/vwq10xzbe6iz/7zzVyJsGJgxnmhrfEGmEI7/dc069116327d27b573068efce0725579/whose_problem_is_it.png)
Here are 4 simple questions you can ask to help identify and solve the right problems:
1. [Whose problem is it really?](#1)
2. [What is their problem?](#2)
3. [Where does the problem come from?](#3)
4. [Do we really need to solve it?](#4)

To understand the importance of identifying and solving the right problems, imagine you are in the strategy team of a B2B software company presented with a situation:

> “New free user signups are strong but paid conversion is dropping. Cost of acquisition is being bid up by marketing competition. Our development team is under-resourced and focused on solving existing user retention which is making great headway. The Board is reluctant to expand the marketing budget given the uncertain funding environment.”

__What is to be done about this situation?__

Our first instinct is often to jump directly to solutions, these may include:
1. Promote the benefits of our paid features earlier on
2. Send marketing campaigns to our free users to upgrade
3. Reduce our free user allowance
4. Increase our paid user allowances
5. Introduce referral bonuses
6. Create new features that our users are willing to pay for
7. Target new free user signup channels

__Stop.__

Before jumping to solutions we should begin by asking our 4 simple questions.

## <a name="1"></a>1) Whose Problem is it Really?
Let us look at each of the stakeholders and restate the problem statement based on the situation from their perspective:

| Stakeholder     | Problem       |
| ---------- | ---------- |
| Free Users       | How can I get the most value out of the product?       |
| Marketing Team       | How can I achieve my user signup target with the given marketing budget?       |
| Development Team       | How can I keep my engineering resourcing focused on the current roadmap?       |
| CEO       | How can I convince the market that my strategy is working and keep stock high?       |
| Board/ Shareholders       | How can I ensure we have enough funding to get through current uncertainty?       |

By defining the problem owner we can already see markedly different solutions.

## <a name="2"></a>2) What is Their Problem?
Once we have identified who has the problem we can look deeper to what is their true problem (if any). Examples below could include:

| Stakeholder     | Problem     |
| ---------- | ---------- |
| Free Users       | I don’t want to get locked into paying for something I won’t use       |
| Marketing Team       | The cost of acquisition is getting too high for us to achieve our signup targets       |
| Development Team       | I don’t have sufficient development resources to work on multiple projects       |
| CEO       | Word may get out that our paid conversion is dropping and share price may fall        |
| Board/ Shareholders       | Market conditions are not conducive to raising new funding now       |

## <a name="3"></a>3) Where does the problem come from?
Once we have identified what is the true problem, we need to locate where the problem stems from. Examples below could include:

| Stakeholder     | Problem     |
| ---------- | ---------- |
| Free Users       | Past bad experiences from having to cancel or request refunds       |
| Marketing Team       | We set too ambitious new user signup targets vs. paid user targets       |
| Development Team       | The projects we are tasked with are often unscoped and variable        |
| CEO       | None. Our strategy is focused on high user engagement and not yet monetisation       |
| Board/ Shareholders       | We want to avoid dilution by not raising money at a lower valuation to fund growth       |

## <a name="4"></a>4) Do we really need to solve it?
Once we have identified who has the problem, what is the problem and located where the problem comes from we are in a final position to ask whether we really need to solve the problem. 

| Stakeholder     | Problem     |
| ---------- | ---------- |
| Free Users       | Yes. Test and promote a pause payment request to free users within first 12 months       |
| Marketing Team       | Yes. We want marketing focused on identifying new free user channels with lower cost of acquisition (we accept there will always be marketing competition)       |
| Development Team       | No. We want development team focused on retention which is a bigger problem       |
| CEO       | No. We are aligned on strategy       |
| Board/ Shareholders       | No. We are not asking for more marketing funding       |

Next time you are faced with a new problem, before jumping to solutions try to stop and ask yourself these 4 simple questions: 
1. Whose problem is it really? 
2. What is their problem? 
3. Where does the problem come from? 
4. Do we really need to solve it?.

__References__

[Are Your Lights On?: How to Figure Out What the Problem Really Is](https://geraldmweinberg.com/Site/AYLO.html) by Donald C. Gause and Gerald M. Weinberg (1982)


Ask: 1) Whose problem is it really? 2) What is their problem? 3) Where does the problem come from? 4) Do we really need to solve the problem?

How to Solve the Right Problem - 4 Simple Questions to ask

A practical tutorial of using React Hooks, Custom Hooks and Context to add a new feature *"keyboard shortcuts"* to the classic Todo App teaching exercise.

### New Feature
- **Product Brief:** Keyboard shortcut keys to change filter display of todolist results ("a" -> Show All, "d" -> Show Done, "n" -> Show Not Doing)
- **How?** Use React Custom Hooks to listen for key presses and dispatch changes to state

### Gotchas
- **Product Brief:** Disable shortcut keys when user is typing inside input text fields (e.g. when creating or editing todo names)
- **How?** Use React Context to track global state of whenever a user has focus in an input text field

[See live demo](https://mannhowietodoapp2.surge.sh/) and [previous blog](https://mannhowie.com/react-and-redux-a-visual-explanation) for a visual explanation of React.

## 1. What are Hooks
Hooks are reusuable functions for your React app when you want to share logic that fetches and updates state, listens for changes in user and window events or handles authentication. The two built-in hooks that most custom hooks will build atop are `useState` and `useEffect`.

### useState
useState built-in hook is used to read and write values to component state. It takes an initial default value and returns an array with two elements. The first is the current value of the state and the second is a state setter function that updates the current value. 

```javascript
// useState example of a simple counter component
import React from 'react'

export default function Counter() {
  let initialState = 0
  let [count, setCount] = React.useState(initialState);

  let handleIncrement = () => setCount(count + 1)

  let handleReset = () => setCount(0);

  return (
    <div>
      <h1>Counter</h1>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
}
```

### useEffect
useEffect built-in hook manages the component lifecycle and side-effects of components. It is used to fetch and update data, listen for changes to state, register and deregister event listeners and clean up components.

It takes two arguments, the first a callback function and the second an array of state values it will listen for changes before executing the callback function.

```javascript
// useEffect example to fetch and persist between UI state and localStorage
import React from 'react'

export default function Counter() {
  // initial value last saved localstorage if exists else 0
  let initialState = JSON.parse(localStorage.getItem('count') || 0)

  let [count, setCount] = React.useState(initialState);

  let handleIncrement = () => setCount(count + 1)

  let handleReset = () => setCount(0);

  // useEffect listen for changes to count and persist state change to localStorage
  React.useEffect(() => {
    localStorage.setItem('count', JSON.stringify(count))
  },[count])

  return (
    <div>
      <h1>Counter</h1>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
}
```

## 2. Our First Custom Hook
To implement our new shortcut key feature we will create two custom hooks:
1. `useKeyPress`: to register and deregister window event listeners for `keydown` and `keyup` of target keys
2. `useFilterKeyPress`: will use our useKeyPress custom hook to register specific keys and dispatch filter events to update our filter view

### useKeyPress
Our first custom hook useKeyPress takes a single argument `targetKey` (e.g. keyboard letter "a") and returns an updated useState current value (a boolean) whenever a window keydown or keyup event is triggered.

We use the built-in useState hook to keep track of whether the targetKey has been pressed `keyPressed` which returns a boolean.

Our simple handlers check whether the pressed key matches the targetKey and returns either true or false.

We use the built-in useEffect hook to to register our window event listeners for the keydown and keyup events and register our handler callbacks. We also tidy up our event listeners by returning a function which removes the event listeners upon component tear down.

```javascript
// hooks/useKeyPress.js
import  React  from 'react';

export const useKeyPress = (targetKey) => {  
  const [keyPressed, setPressedKey] = React.useState(false)

  let handleKeyDown = (e) => {    
    if (e.key === targetKey) {
      setPressedKey(true)
    }
  }

  let handleKeyUp = (e) => {
    if (e.key === targetKey) {
      setPressedKey(false)
    }
  }

  React.useEffect(() => {
    window.addEventListener('keydown', handleKeyDown)
    window.addEventListener('keyup', handleKeyUp)

    return () => {
      window.removeEventListener('keydown', handleKeyDown)
      window.removeEventListener('keyup', handleKeyUp)
    }
  }, [])

  return keyPressed
}
```
### useFilterKeyPress
Our second custom hook useFilterKeyPress will use our previous custom hook `useKeyPress` to listen for key presses and will then dispatch events to update our parent component state. It takes a dispatch function as an argument from the parent app to dispatch changes to our parent reducer.

We first register our shortcut key presses ("a", "d", "n"). This will return a state boolean for each value and will update whenever a keydown or keyup event is triggered.

We use the useEffect hook to dispatch the relevant filter actions based on which key is pressed. It takes an array of values `[pressA, pressD, pressN]` which will trigger the functions inside the hook whenever those values change.

```javascript
// hooks/useFilterKeyPress.js

import React from 'react'
import {useKeyPress} from './useKeyPress'

export const useFilterKeyPress = (dispatch) => {
  const pressA = useKeyPress("a")
  const pressD = useKeyPress('d')
  const pressN = useKeyPress('n')

  // useEffect hook detect changes when input not in focus in keys above, if true dispatch filter change
  React.useEffect(() => {
    if (pressA) {
      dispatch({type: 'SHOW_ALL'})
    }
    if (pressD) {
      dispatch({type: 'SHOW_DONE'})
    }
    if (pressN) {
      dispatch({type:'SHOW_NOT_DONE'})
    }
  },[pressA, pressD, pressN])
}
```

## 3. React Context API
The React Context API allows us to share global state amongst parent and children components without passing them through intermediaries (known as prop drilling).

In our product brief we are made aware of a gotcha with our shortcut keys. We need to disable the shortcut keys if a user is entering text inside an input text field. This is to prevent the user from unintentionally triggering the filter updates when simply entering text.

As our application scales there is likely to be future input text fields which may be nested deeply as children components.

This is a great use case of the React Context API for us to keep track of whenever a user has `focus` inside an input text field.

### Create our new context
First we create our context object which we will import across parent and children components. We will use this context as a way to track global state of whether an input text field is in focus or not.
```javascript
//context/contextInput.js
import React from 'react'

const ContextInput = React.createContext()

export default ContextInput
```

### Update useFilterKeyPress
Next we must update our custom hook `useFilterKeyPress` to not trigger the filter actions if an input text field is in focus.

We create a new boolean state `isInputFocused` and a setter `setIsInputFocused` which will be based on our `ContextInput` to track whether an input text field is in focus.

We udate our useEffect code to ensure the actions are only dispatched if input is not in focus. And we return the value of `[isInputFocused, setIsInputFocused]` to allow the state to be read and updated. 

```javascript
// hooks/useFilterKeyPress.js

import React from 'react'
import {useKeyPress} from './useKeyPress'

export const useFilterKeyPress = (dispatch) => {
  const pressA = useKeyPress("a")
  const pressD = useKeyPress('d')
  const pressN = useKeyPress('n')
  // global state to detect if text input is in focus
  // within input we will set as true if input onFocus and false when input onBlur (e.g. toggles when input out of focus)
  const [isInputFocused, setIsInputFocused] = React.useState(false)

  // useEffect hook detect changes when input not in focus in keys above, if true dispatch filter change
  React.useEffect(() => {
    if (!isInputFocused) {
      if (pressA) {
        dispatch({type: 'SHOW_ALL'})
      }
      if (pressD) {
        dispatch({type: 'SHOW_DONE'})
      }
      if (pressN) {
        dispatch({type:'SHOW_NOT_DONE'})
      }
    }
  },[pressA, pressD, pressN, isInputFocused])

  return [isInputFocused, setIsInputFocused]
}
```
### Use context and custom hook in our main App
We first use our custom hook `useFilterKeyPress` which returns a value and setter to determine whether any input field is in focus. We pass it our dispatch handler which will allow the hook to update the App's parent state to change filter display options.
```javascript
  import {useFilterKeyPress} from '../hooks/useFilterKeyPress'
  // Custom hook to filter shortcut keypress
  const [isInputFocused, setIsInputFocused] = useFilterKeyPress(dispatch)
```
We then use our `ContextInput` and apply its Provider model which wraps it as a parent component and gives all children component within it access to its context values. We pass it a value property being our state values and setters `isInputFocused` and `setIsInputFocused` which will allow children components to update the state.

The two children components that will use it now include the `<NewTodoForm>` and the `<EditTodoForm>` which is a deeply nested child of the `<TodoList>`. This is the primary benefit of using React Context API, we no longer have to pass handler functions to multiple intermediaries which exposes us to code duplication and error.

```javascript
import {useFilterKeyPress} from '../hooks/useFilterKeyPress'
import ContextInput from '../context/contextInput'

const [isInputFocused, setIsInputFocused] = useFilterKeyPress(dispatch)
return (
    <div>
      <h1>TODOAPP</h1>

      {/* Using React Context for sharing global isInputFocused variable to detect if any text input is focus */}
      <ContextInput.Provider value={[isInputFocused, setIsInputFocused]}>
        <NewTodoForm handleNewTodo={handleNewTodo} />

        <Filter filter={filter} handleFilter={handleFilter}/>

        <TodoList 
          todos={todos}
          editing={editing}
          handleMarkDone={handleMarkDone}
          handleMarkEdit={handleMarkEdit}
          handleDeleteTodo={handleDeleteTodo}
          handleEditTodo={handleEditTodo}
          handleMarkEditUndo={handleMarkEditUndo}
          filter={filter}
        />

      </ContextInput.Provider>
    </div>
```

Final App.js altogether
```javascript
//src/components/App.js

import React from 'react';
import {useLocalStorage} from '../hooks/useLocalStorage'
import {useFilterKeyPress} from '../hooks/useFilterKeyPress'
import ContextInput from '../context/contextInput'

import reducer from '../reducers/index'
import NewTodoForm from './NewTodoForm'
import TodoList from './TodoList'
import Filter from './Filter'

function App() {
  let initialState = reducer(undefined, {})

  // custom hook useLocalStorage
  const [state, setState] = useLocalStorage(initialState, 'state')

  // reducer implementation of dispatch
  const dispatch = (action) => {
    setState(prevState => reducer(prevState, action))
  }

  // State handlers
  let handleMarkDone = (id) => {
    dispatch({type: 'MARK_DONE_TODO', id})
  }
  let handleMarkEdit = (id) => {
    dispatch({type: 'MARK_EDIT_TODO', id})
  }
  let handleMarkEditUndo = (id) => {
    dispatch({type: 'MARK_EDIT_UNDO_TODO', id})
  }
  let handleNewTodo = (content) => {
    dispatch({type: 'ADD_TODO', content})
    dispatch({type: 'SHOW_ALL'})
  }
  let handleEditTodo = ({id, content, done}) => {
    dispatch({type: 'EDIT_TODO', id, content, done})
  }
  let handleDeleteTodo = (id) => {
    dispatch({type: 'DELETE_TODO', id})
  }
  let handleFilter = (e) => {
    let filter = e.target.value 
    dispatch({type: filter})
  }

  // State values from reducers
  let {todo, visibility} = state
  let {todos, editing} = todo
  let {filter} = visibility

  // Custom hook to filter shortcut keypress
  const [isInputFocused, setIsInputFocused] = useFilterKeyPress(dispatch)

  return (
    <div>
      <h1>TODOAPP</h1>

      {/* Using React Context for sharing global isInputFocused variable to detect if any text input is focus */}
      <ContextInput.Provider value={[isInputFocused, setIsInputFocused]}>
        <NewTodoForm handleNewTodo={handleNewTodo} />

        <Filter filter={filter} handleFilter={handleFilter}/>

        <TodoList 
          todos={todos}
          editing={editing}
          handleMarkDone={handleMarkDone}
          handleMarkEdit={handleMarkEdit}
          handleDeleteTodo={handleDeleteTodo}
          handleEditTodo={handleEditTodo}
          handleMarkEditUndo={handleMarkEditUndo}
          filter={filter}
        />

      </ContextInput.Provider>
    </div>
  );

}

export default App;
```

### Use and update context
Finally with our children components we can now access our `ContextInput` and update its state based on whether an input field is in `focus` or not.

To do this we import the context and use React's context hook `useContext` which takes the `ContextInput` object as an argument and returns the values of the parent Provider, in this case our setter function `setIsInputFocused`. In our example we don't require the current value as we are only interested in updating the value.

Then we add two event callback functions on our input text field `onFocus` and `onBlur` to update our `IsInputFocused`value. We set it as true when `onFocus` and  false when `onBlur` to reset it.

As this value is now shared inside the global `ContextInput` object, the parent App component can now access the latest value of `IsInputFocused` and not trigger any filter actions if this value is true.

```javascript
// src/components/NewTodoForm.js
import React from 'react'
import ContextInput from '../context/contextInput'

const NewTodoForm = (props) => {
  const [content, setContent] = React.useState('')
  const [,setIsInputFocused] = React.useContext(ContextInput)

  let handleChange = (e) => {
    setContent(e.target.value)
  }
  let handleSubmit = (e) => {
    e.preventDefault()
    if (content.trim() === '') return
    props.handleNewTodo(content)
    setContent('')
  }

  return (
    <form onSubmit={handleSubmit} style={{border: '1px solid rebeccapurple'}}>
      <p><i style={{color: 'rebeccapurple'}}>NewTodoForm</i></p>
      <input type="text" name="content" value={content} onChange={handleChange} placeholder="Add new todo" onBlur={() => setIsInputFocused(false)} onFocus={() => setIsInputFocused(true)}/>
    </form>
  )
}

export default NewTodoForm
```

Similarly we follow the same pattern for the `EditTodoForm` which is nested multiple levels deep within `TodoList` component without needing to prop drill across multiple components.

```javascript
// src/components/EditTodoForm
import React from 'react'
import ContextInput from '../context/contextInput'

const EditTodoForm = (props) => {
  const [content, setContent] = React.useState(props.content)
  const [done, setDone] = React.useState(props.done)
  // ContextAPI
  const [,setIsInputFocused] = React.useContext(ContextInput)

  let handleChange = (e) => {
    setContent(e.target.value)
  }
  let handleChecked = (e) => {
    setDone(!done)
  }
  let handleSubmit = (e) => {
    e.preventDefault()

    props.handleEditTodo({
      id: props.id,
      content: content,
      done: done
    })
  }
  return (
    <div style={{border: '1px solid blue'}}>
      <i style={{color: 'blue'}}>EditTodoForm</i>
      <form onSubmit={handleSubmit}>
        <input type="text" name="content" value={content} onChange={handleChange} onBlur={() => setIsInputFocused(false)} onFocus={() => setIsInputFocused(true)} />
        <input type="checkbox" name="done" checked={done} onChange={handleChecked}/>
        <input type="submit" value="Update"/>
      </form>
      <button onClick={() => props.handleMarkEditUndo(props.id)}>Undo Edit</button>
    </div>

  )
}

export default EditTodoForm
```

[Click here to see the full github repo](https://github.com/howardmann/react-projects/tree/master/todoapp)

Practical tutorial of using React Hooks, Custom Hooks and Context API when adding new features to your web app. Adding keyboard shortcut features to the classic Todo App teaching exercise.


Howie Mann
Startup & Investing Advice
About Articles Stocks

About me

Recent Articles

How the US Air Force Ditched the "Average" and Saved Lives

How to Solve the Right Problem - 4 Simple Questions to ask

Learn React - Hooks and Context

Howie MannStartup & Investing AdviceAboutArticlesStocks

About me

Recent Articles

How the US Air Force Ditched the "Average" and Saved Lives

How to Solve the Right Problem - 4 Simple Questions to ask

Learn React - Hooks and Context

Howie Mann
Startup & Investing Advice
About Articles Stocks