New: Cookbooks and AI ExplanationsStep-by-Step recipes to solve problems connected to Roadmaps and Cheat Sheets. Need more details? Use AI buttons for structured and simple explanations with concrete examples throughout the whole platform.Take a look
Three of my components run almost the exact same effect, copied and pasted each time.
What you'll have at the end
A custom hook used by two components with the duplicate code deleted from both
You need
Two working React components, each polling its own endpoint on a timer and storing the result in state with nearly identical effect code, inside a TypeScript project.
Not covered
Two components that render identical JSX with only the text changed call for a shared component with props, a different job from this one.
Leans on
Stop a useEffect that loops forever
if the effect you're about to pull out is already re-running on every render instead of settling, fix that self-feeding loop first, or the shared hook inherits it
Turn repeated markup into one reusable component with props
when what two components actually share is markup and props rather than stateful logic, which calls for a shared component instead
Checked 22 Aug 2026
Part of the React Frontend Framework cookbook