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); |