An Effect synchronizes a component with something outside React, such as a document property, browser event subscription, or asynchronous request. Include every changing input that the synchronization reads. Return a cleanup function when the old synchronization must stop before a new one starts or the component unmounts. Otherwise a hidden monitor can keep reacting, or an older response can overwrite newer content. You'll check those behaviors through the visible interface and document state. Derived text from existing props usually doesn't need an Effect. Keep ordinary rendering as a calculation, and use the Effect only for the external system it has to coordinate.