React Hooks Deep Dive

// The beginning of the story. Show something in the browser.

ReactDOM.render(
  <TodosApp initialData={initialData} />,
  document.getElementById('mountNode')
);

// Seed test data

const initialData = {
  todos: {
    A: {
      body: 'Learn React Fundamentals',
      done: true,
    },
    B: {
      body: 'Build a TODOs App',
      done: false,
    },
    C: {
      body: 'Build a Game',
      done: false,
    },
  },
};

const uniqueId = () =>
  Date.now().toString(36) + Math.random().toString(36);

class TodosApp extends React.Component {
/* The component class definition is the blueprint used every time
   an "element" from this component is to be rendered in the browser.
   React instantiates an object from this class when we do:
   <TodosApp ... />
   and that object gets displayed in the browser.
   React associates this instance with the DOM-rendered element.
   This instance can be accessed using the "this" keyword
   within the class definition here. */

  state = {
    todos: this.props.initialData.todos,
    filterLabel: 'All',
  };
  /* Initialize the special state property on the instantiated object
     This is a "class field" syntax that's equivalent to doing
     "this.state = { .... }" in the class constructor method.

     A class component state is a plain-old JS object. This one has a
     "todos" property that gets its initial value from the props input
     and a "filterLabel" string. You can have as many properties on
     the state object as you need but you should keep what you put
     on the state to the absolute minimum. */

  /* As you'll see in the many methods below, class fields can also
    be used with arrow functions and because of how closures work for
    arrow functions, we can safely use the "this" keyword within them
    and we'll be correctly using the instantiated instance of TodosApp. */

  addNewTodo = newTodoBody =>
    this.setState(prevState => ({
      todos: {
        ...prevState.todos,
        [uniqueId()]: {
          body: newTodoBody,
          done: false,
        },
      },
    }));

  markTodoDone = (todoId, newDoneValue) =>
    this.setState(prevState => ({
      todos: {
        ...prevState.todos,
        [todoId]: {
          ...prevState.todos[todoId],
          done: newDoneValue,
        },
      },
    }));

  deleteTodo = todoId =>
    this.setState(prevState => {
      const { [todoId]: _, ...todos } = prevState.todos;
      return { todos };
    });

  deleteAllCompleteTodos = () =>
    this.setState(prevState => ({
      todos: Object.entries(prevState.todos).reduce((acc, [todoId, todo)] => {
        if (!todo.done) {
          acc[todoId] = todo;
        }
        return acc;
      }, {}),
    }));

  setFilter = newFilterLabel => this.setState({ filterLabel: newFilterLabel });

  /* The 5 methods above are mutations to be done on React's state for
     this component (they have nothing to do with the DOM).
     Also, except for the "setState" method, all the logic here is
     not really React but rather pure JavaScript.

     setState is React’s way to keep track of the state changes since
     React needs to “react” to all of these changes.

     The whole TodosApp component will get re-rendered along with all of
     its children every time any of these methods is called. However, React
     will still only take to the browser the parts that get different
     content based on the new modifications to the state. React uses
     a special "reconciliation algorithms" to do that. */

  shouldShowTodo = todo => {
    const { filterLabel } = this.state;
    return (
      filterLabel === 'All' ||
      (filterLabel === 'Active' && !todo.done) ||
      (filterLabel === 'Completed' && todo.done)
    );
  };

  /* The shouldShowTodo method perform "computations".
     Computing values is a common thing to do before the render method.
     Computation methods can be called directly in the render method below.
     They are NOT "handlers" like the mutation methods above. */

  render() {
    return (
      <>
        <header>TODO List</header>
        <ul>
          {Object.entries(this.state.todos).map(
            ([todoId, todo]) =>
              this.shouldShowTodo(todo) && (
                <TodoItem
                  key={todoId}
                  id={todoId}
                  todo={todo}
                  markTodoDone={this.markTodoDone}
                  deleteTodo={this.deleteTodo}
                />
              )
          )}
          {/* We take the entries of the todos object and map every entry
              to a <TodoItem /> element passing it the props it needs.

              An entry is a key/value pair. The key is the id of a todo
              and the value is the todo object itself (body and done).

              Before rendering a TodoItem element, we invoke a function
              to check if that element should be shown in the UI based
              on the current filtering state. This use of the "&&"
              operator is called "short-circuit evaluation". If the
              shouldShowTodo function call is false, React will render
              nothing. If it's true, React will render the second part
              of the Boolean check, which is the TodoItem element itself.

              The "key" attribute is a React internal thing. It helps React
              identify dynamic children and what to do when they change.
              Your code can't depend on it. An "id" prop was defined
              to pass the same value used as "key". */}
        </ul>
        <AddTodoForm onSubmit={this.addNewTodo} />
        <div className="actions">
          Show:{' '}
          <FilterButton
            label="All"
            onClick={this.setFilter}
            active={this.state.filterLabel === 'All'}
          />
          <FilterButton
            label="Active"
            onClick={this.setFilter}
            active={this.state.filterLabel === 'Active'}
          />
          <FilterButton
            label="Completed"
            onClick={this.setFilter}
            active={this.state.filterLabel === 'Completed'}
          />
        </div>
        <div className="actions">
          <button onClick={this.deleteAllCompleteTodos}>
            Delete All Completed
          </button>
        </div>
        <footer>
          <TodosLeft todos={this.state.todos} />
        </footer>
      </>
    );
  }
  /* The render method is what React uses to determine the shape
     this element should take in the real browser's UI.
     It returns JSX which gets compiled into React API calls.

     The <></> syntax is sugar for "React.Fragment"
     which is a way to group React elements without
     introducing an unnecessary "wrapping" parent element. */
}

class TodoItem extends React.PureComponent {
/* We're not managing any state or side effects for a TodoItem.
   Each TodoItem gets purely rendered based on its props input
   (which contains both data and behavior).
   This purity makes the component a candidate to extend
   React.PureComponent instead of React.Component. This signals
   to React that if the parent component re-renders and
   nothing has changed in the props of a rendered TodoItem
   then don't bother re-rendering that TodoItem (in memory).
   It's pure! React can re-use the previously rendered version. */

  handleCheckboxChange = event => {
    const newDone = event.target.checked;
    /* React gives access to the native DOM "event" associated
       with any handler. You can use event.target to access the
       DOM element on which the event occurred. This target is
       used here to read the checkbox's "checked" state */

    this.props.markTodoDone(this.props.id, newDone);
  };

  handleXClick = () => this.props.deleteTodo(this.props.id);

  /* The 2 local handlers above just invoke the behaviors
     that are pre-defined by the parent. The TodoItem
     component has no control over these behaviors except
     when to invoke them and what arguments they receive.*/

  render() {
    const { todo } = this.props;

    const todoStyle = { textDecoration: todo.done ? 'line-through' : 'none' };
    /* This is a computed style object. This is a common way
       to represent "conditional" styles. It's used below
       with the todo.body span */

    return (
      <li>
        <input
          type="checkbox"
          checked={todo.done}
          onChange={this.handleCheckboxChange}
        />
        <span style={todoStyle}>{todo.body}</span>
        <span role="link" onClick={this.handleXClick}>
          X
        </span>
      </li>
    );
  }
}

class AddTodoForm extends React.PureComponent {
  /* The AddTodoForm component depends on a single prop,
     which is the onSubmit behavior and it invokes it when
     the Add TODO button is clicked. It passes what the user
     types in an input box using the DOM directly to read that
     typed value. */

  handleSubmit = event => {
    event.preventDefault();
    this.props.onSubmit(event.target.todoBody.value);
    event.target.todoBody.value = '';
  };
  /* This is another example where the handled event's target
     attribute is used to read a user interaction. React is not
     aware of the UI state changes when the user types or check
     a checkbox. It just asks the DOM API for these value when
     it needs them. This is the "uncontrolled input" pattern. */

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" name="todoBody" placeholder="What TODO?" />
        <button type="submit">Add TODO</button>
      </form>
    );
  }
}

class FilterButton extends React.PureComponent {
  handleClick = () => this.props.onClick(this.props.label);
  render() {
    const buttonStyle = {
      fontWeight: this.props.active ? 'bold' : 'normal',
    };
    /* Another example of conditional styling */

    return (
      <button onClick={this.handleClick} style={buttonStyle}>
        {this.props.label}
      </button>
    );
  }
}

class TodosLeft extends React.PureComponent {
  activeTodosCount = () =>
    Object.values(this.props.todos).filter(todo => !todo.done).length;

  /* This is a practical reason to have this component as "pure".
     When the "filterLabel" state changes in the parent TodosApp
     component (but the todos array is exactly the same). We do NOT
     need to recompute the active TODOs count. It did not change.
     The purity of this component will make React
     skip that computation for that case. */

  componentDidMount() {
    document.title = Active TODOs: ${this.activeTodosCount()};
  }

  componentDidUpdate() {
    document.title = Active TODOs: ${this.activeTodosCount()};
  }

  /* The 2 lifecycle methods present an example of a "side effect".
     Whenever this component is re-rendered in memory it'll update
     the main document title to show the current active TODOs count. */

  render() {
    return <div>TODOs left: {this.activeTodosCount()}</div>;
  }
}

class FilterButton extends React.Component {
  render() {
    const handleClick = () => this.props.onClick(this.props.label);
    const buttonStyle = {
      fontWeight: this.props.active ? 'bold' : 'normal',
    };
    return (
      <button onClick={handleClick} style={buttonStyle}>
        {this.props.labellabel}
      </button>
    );
  }
}

class FilterButton extends React.Component {
  render() {
    const { label, active, onClick } = this.props;

    const handleClick = () => onClick(label);
    const buttonStyle = {
      fontWeight: active ? 'bold' : 'normal',
    };
    return (
      <button onClick={handleClick} style={buttonStyle}>
        {label}
      </button>
    );
  }
}

const FilterButton = ({ label, active, onClick }) => {
  const handleClick = () => onClick(label);
  const buttonStyle = {
    fontWeight: active ? 'bold' : 'normal',
  };
  return (
    <button onClick={handleClick} style={buttonStyle}>
      {label}
    </button>
  );
};

const TodosApp = ({ initialData }) => {
  // state = {
  //   todos: this.props.initialData.todos,
  //   filterLabel: 'All',
  // };
  let todos, filterLabel, setState;
  /* These are temp variables so that we can get
     rid of all "this." in the code. They need to be
     replaced with React.useState calls. */

  const addNewTodo = newTodoBody =>
    // setState(prevState => ({
    //   todos: {
    //     ...prevState.todos,
    //     [uniqueId()]: {
    //       body: newTodoBody,
    //       done: false,
    //     },
    //   },
    // }));

  // ... 4 more functions ...

  /* Every setState call will need to be replaced above
     but everything below this point can stay exactly the same */

  const shouldShowTodo = todo => {
    return (
      filterLabel === 'All' ||
      (filterLabel === 'Active' && !todo.done) ||
      (filterLabel === 'Completed' && todo.done)
    );
  };

  return (
    <>
      <header>TODO List</header>
      <ul>
        {Object.entries(todos).map(
          ([todoId, todo]) =>
            shouldShowTodo(todo) && (
              <TodoItem
                key={todoId}
                id={todoId}
                todo={todo}
                markTodoDone={markTodoDone}
                deleteTodo={deleteTodo}
              />
            )
        )}
      </ul>
      <AddTodoForm onSubmit={addNewTodo} />
      <div className="actions">
        Show:{' '}
        <FilterButton
          label="All"
          onClick={setFilter}
          active={filterLabel === 'All'}
        />
        <FilterButton
          label="Active"
          onClick={setFilter}
          active={filterLabel === 'Active'}
        />
        <FilterButton
          label="Completed"
          onClick={setFilter}
          active={filterLabel === 'Completed'}
        />
      </div>
      <div className="actions">
        <button onClick={deleteAllCompleteTodos}>
          Delete All Completed
        </button>
      </div>
      <footer>
        <TodosLeft todos={todos} />
      </footer>
    </>
  );
};

// Class version

  // 1) Initialize
  state = {
    todos: this.props.initialData.todos,
    filterLabel: 'All',
  };

  // 2) Get values and updater function
  const { todos, filterLabel } = this.state;
  const { setState } = this;


// Hooks version

  // Initialize and get values and updater functions
  const [todos, setTodos] = useState(initialData.todos);
  const [filterLabel, setFilterLabel] = useState('All');

// Class version

  addNewTodo = newTodoBody =>
    this.setState(prevState => ({
      todos: {
        ...prevState.todos,
        [uniqueId()]: {
          body: newTodoBody,
          done: false,
        },
      },
    }));

// Hooks version

  const addNewTodo = newTodoBody =>
    setTodos(prevTodos => ({
      ...prevTodos,
      [uniqueId()]: {
        body: newTodoBody,
        done: false,
      },
    }));

// Class version

  setFilter = newFilterLabel => this.setState({ filterLabel: newFilterLabel });

// Hooks version

  const setFilter = newFilterLabel => setFilterLabel(newFilterLabel);

        <FilterButton
          label="All"
          onClick={setFilterLabel}
          active={filterLabel === 'All'}
        />

        {/* ... 2 more FilterButton ... */}

useEffect(() => {
  // Do something after each render
  // but only if dep1 or dep2 changed
}, [dep1, dep2]);

// Class version

  activeTodosCount = () =>
    Object.values(this.props.todos).filter(todo => !todo.done).length;

  componentDidMount() {
    document.title = Active TODOs: ${this.activeTodosCount()};
  }

  componentDidUpdate() {
    document.title = Active TODOs: ${this.activeTodosCount()};
  }

// Hooks version

  const activeTodosCount =
    Object.values(todos).filter(todo => !todo.done).length;

  useEffect(() => {
    document.title = Active TODOs: ${activeTodosCount};
  }, [activeTodosCount]);

const TodosApp = ({ initialData }) => {
/* There is no "instance" concept when using React function components.
   React just calls the functions each time it needs to render them.
   The "props" data is passed to the functions as its only argument. */

  const [todos, setTodos] = useState(initialData.todos);
  const [filterLabel, setFilterLabel] = useState('All');

  /* The state is externally managed in memory and
     made accessible through the useState hook. */

  const addNewTodo = newTodoBody =>
    setTodos(prevTodos => ({
      ...prevTodos,
      [uniqueId()]: {
        body: newTodoBody,
        done: false,
      },
    }));

  const markTodoDone = (todoId, newDoneValue) =>
    setTodos(prevTodos => ({
      ...prevTodos,
      [todoId]: {
        ...prevTodos[todoId],
        done: newDoneValue,
      },
    }));

  const deleteTodo = todoId =>
    setTodos(prevTodos => {
      const { [todoId]: _, ...todos } = prevTodos;
      return todos;
    });

  const deleteAllCompleteTodos = () =>
    setTodos(prevTodos =>
      Object.entries(prevTodos).reduce((acc, [todoId, todo)] => {
        if (!todo.done) {
          acc[todoId] = todo;
        }
        return acc;
      }, {})
    );

  /* The 4 functions above are mutation functions. They update
     state elements using their updater functions (setTodos).
     By using a function as the argument to setTodos,
     these functions don't need access to "current" value of the
     todos state. This is better than using a direct value
     for setTodos because it allows these mutation functions to be
     memoized.
     Note how the setFilter operation did not need a function here
     because the setFilterLabel updater function can simply be used
     directly in component JSX. 1 less function for the win. */

  const shouldShowTodo = todo =>
    filterLabel === 'All' ||
    (filterLabel === 'Active' && !todo.done) ||
    (filterLabel === 'Completed' && todo.done);

  /* This function is a computation function. It currently depends
     on reading the filterLabel state element directly in its
     scope (using closures). This is not ideal as the function
     itself need to be recreated every time the component renders.
     It can be memoized to only get re-created when the filterLabel
     element changes but since it is not passed down to any child
     elements in JSX a memoization in this case is not necessary. */

  return (
    <>
      <header>TODO List</header>
      <ul>
        {Object.entries(todos).map(
          ([todoId, todo]) =>
            shouldShowTodo(todo) && (
              <TodoItem
                key={todoId}
                id={todoId}
                todo={todo}
                markTodoDone={markTodoDone}
                deleteTodo={deleteTodo}
              />
            )
        )}
      </ul>
      <AddTodoForm onSubmit={addNewTodo} />
      <div className="actions">
        Show:{' '}
        <FilterButton
          label="All"
          onClick={setFilterLabel}
          active={filterLabel === 'All'}
        />
        <FilterButton
          label="Active"
          onClick={setFilterLabel}
          active={filterLabel === 'Active'}
        />
        <FilterButton
          label="Completed"
          onClick={setFilterLabel}
          active={filterLabel === 'Completed'}
        />
      </div>
      <div className="actions">
        <button onClick={deleteAllCompleteTodos}>
          Delete All Completed
        </button>
      </div>
      <footer>
        <TodosLeft todos={todos} />
      </footer>
    </>
    /* What's returned here is exactly equivalent to the class version except
       instead of "this.something", we just use "something" directly. */
  );
};

const TodoItem = ({ todo, markTodoDone, deleteTodo }) => {
  const handleCheckboxChange = event => {
    const newDone = event.target.checked;
    markTodoDone(todo.id, newDone);
  };

  const handleXClick = () => {
    deleteTodo(todo.id);
  };

  /* Both of the handlers above depend on "todo" which is a prop for
     this component. This also means they have to be recreated every time
     this component is re-rendered by its parent. */

  const todoStyle = { textDecoration: todo.done ? 'line-through' : 'none' };
  /* Style computing is done exactly the same except its now part of the
     function component body. In class components, this line was in the
     render function itself. */

  return (
    <li>
      <input
        type="checkbox"
        checked={todo.done}
        onChange={handleCheckboxChange}
      />
      <span style={todoStyle}>{todo.body}</span>
      <span role="link" onClick={handleXClick}>
        X
      </span>
    </li>
  );
};

const AddTodoForm = ({ onSubmit }) => {
  const handleSubmit = event => {
    event.preventDefault();
    onSubmit(event.target.todoBody.value);
    event.target.todoBody.value = '';
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="todoBody" placeholder="What TODO?" />
      <button type="submit">Add TODO</button>
    </form>
  );
};

const FilterButton = ({ label, active, onClick }) => {
  const handleClick = () => onClick(label);
  const buttonStyle = {
    fontWeight: active ? 'bold' : 'normal',
  };
  return (
    <button onClick={handleClick} style={buttonStyle}>
      {label}
    </button>
  );
};

/* Not much has changed for the AddTodoForm and FilterButton components
   except for omitting this.props. The props are now destructured and
   used directly in the body of the components' functions. */

const TodosLeft = ({ todos }) => {
  const activeTodosCount =
    Object.values(todos).filter(todo => !todo.done).length;

  useEffect(() => {
    document.title = Active TODOs: ${activeTodosCount};
  }, [activeTodosCount]);

  return <div>TODOs left: {activeTodosCount}</div>;

  /* Each time the TodosLeft component is re-rendered, it'll compute
      the new value of activeTodosCount and use it in the output.
      The side effect hook function will also update the document
      title with the new count on each render. \*/

};

// Class version

class TodosLeft extends React.PureComponent {
  // ...
}

// Hooks version

const TodosLeft = React.memo(function TodosLleft ({ todos }){
  // ...
});

useCallback(function callback() { }, [dep1, dep2, ...]);
    useMemo(function   create() { }, [dep1, dep2, ...]);

const C = useCallback(() => [1, 2, 3], []);

const M = useMemo(() => [1, 2, 3], []);

// In the TodosApp function component:

  const addNewTodo = useCallback(
    newTodoBody =>
      setTodos(prevTodos => ({
        ...prevTodos,
        [uniqueId()]: {
          body: newTodoBody,
          done: false,
        },
      })),
    []
  );