Someone was asking me about comparing the HoC and Render Props patterns (and their shortcomings) to hooks. I might leave this up as a public gist for others if it's helpful.
tldr;
Issues with HoC:
| import React, { useEffect } from 'react'; | |
| import { useRouter } from 'state'; | |
| // Component that attaches scroll to top hanler on router change | |
| // renders nothing, just attaches side effects | |
| export const ScrollToTopControlller = () => { | |
| // this assumes that current router state is accessed via hook | |
| // but it does not matter, pathname and search (or that ever) may come from props, context, etc. | |
| const { pathname, search } = useRouter(); | |
| let autoNext = () => { | |
| Array.from(document.querySelectorAll('button')) | |
| .filter(b => b.textContent === 'Continue to next module') | |
| .forEach(b => b.click()); | |
| }; | |
| setInterval(autoNext, 2500); |