Derived State

Three tasks sit in a to-do list, and two of them are complete. A component that shows the completed tasks could keep two arrays in state, one with all three tasks and one with the two completed ones. It needs only the first array, however, because the second can be computed from it at any moment. A value that is computed from existing state or props during rendering, instead of being stored in state, is called derived state.

Computing the Value During Rendering

The TaskList component below stores the tasks in state and computes completedTasks with filter each time it renders