React accordion frontend task with custom hooks

Photo by Lautaro Andreani on Unsplash

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 ….

1. isOpen state is not in deps of useEffect

2. old heightstate 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 heightstate is not in deps of useEffect too.

Restrictions

1. Don`t change scss file
2. Accordion component must use useAccordion hook only
3. Don`t low performance (don`t try save window width in state)

Conditions to reproduce bug

1. Open codesandbox
2. Change window size to amount 500px
3. Open accordion
4. Change window size to more than 1000px
5. You see that height don`t recompute

Happy coding!