Components must be idempotent

Put simply, idempotence means that you always get the same result everytime you run that piece of code.

function NewsFeed({ items }) {
  // ✅ Array.filter doesn't mutate `items`
  const filteredItems = items.filter(item => item.isDisplayed === true);
  return (
    <ul>
      {filteredItems.map(item => <li>{item.text}</li>}
    </ul>
  );
}

This means that all code that runs during render must also be idempotent in order for this rule to hold. For example, this line of code is not idempotent (and therefore, neither is the component) and breaks this rule:

function Clock() {
  const date = new Date();  // ❌ always returns a different result!
  return <div>{date}</div>
}

new Date() is not idempotent as it always returns the current date and changes its result every time it’s called. When you render the above component, the time displayed on the screen will stay stuck on the time that the component was rendered. Similarly, functions like Math.random() also aren’t idempotent, because they return different results every time they’re called, even when the inputs are the same.

Try building a component that displays the time in real-time in our challenge to see if you follow this rule!