This deep-dive assumes you have a decent understanding of JavaScript fundamentals, including the differences between when synchronous and asynchronous code is executed, short-circuit expressions and short-circuit execution, and IIFEs. The basics The first thing you need to understand about functional components is that they are functions. For all intents and purposes, they execute every line of code, from top to bottom, on every render. That's why if you put a console.log() in the middle of a component body, outside of a hook, it seems to run almost constantly, every time any part of that component changes state - because it does. Every variable gets re-declared, every function gets re-invoked, every time. And yes, this means that on every render, every hook that you've invoked gets invoked again. The magic of hooks is that they don't execute the exact same functionality on every invocation - instead, their function bodies are written such that they conditionally execute based on the context in which they were invoked, and the state of the component and of your app at large. A functional component has three basic phases that it goes through: Mount, the first invocation, when the component first renders to the page Update, often referred to as Rerender, when the component re-invokes as its internal state changes Unmount, the act of the component removing itself from the DOM

Throughout this document, I will be using an example Heroku app, myherokuappname. Anywhere you see this, please substitute in your Heroku app name. Later in the instructions I will cover how to make an app on Heroku. Requirements Update your python dependencies Run pipenv lock -r > requirements.txt (note the > after the -r) in the directory where your Pipfile and requirements.txt files are located (they should be in the same directory) The output of pipenv lock -r is a special text string containing all of your python dependencies designed to be written to file The > operator in bash/zsh takes the incoming buffer, in this case the text output, and runs an overwrite command on the following argument, in this case requirements.txt, which will completely replace the contents of requirements.txt with the output of pipenv lock -r Don't worry, this command won't remove any dependencies, so long as they're still in your Pipfile

Double Check Are you seeing the action dispatched in your console, and/or is the action type being displayed in the history in Redux dev tools? If the action is supposed to have a payload, does it? Is that payload being correctly processed by your store? Within the switch case that holds the type for that action, what's happening? What are the values of the relevant variables before you return your new state? Are those changes being correctly reflected in your Redux dev tools? Referential Check Are you copying your state at all levels such that it's never referentially equal to your previous state?