React accordion frontend task with custom hooks
2 min readDec 9, 2021
Issue
You have height based accordion component.
Main issue in next usage case — imagine you see some X site with my accordions and you decide rotate your phone or tablet in landscape view.
You hope that height should be recomputed while window size changed but that did not happen.
Because ….
isOpen
state is not in deps of useEffect
2. old height
state is not in deps of useEffect too
Accordion toggling maybe help you but…
you don`t know under what conditions it catn`t help because height
state is not in deps of useEffect too.
Restrictions
- Don`t change scss file
- Accordion component must use
useAccordion
hook only - Don`t low performance (don`t try save window width in state)
Conditions to reproduce bug
- Open codesandbox
- Change window size to amount 500px
- Open accordion
- Change window size to more than 1000px
- You see that height don`t recompute
Happy coding!