search

rescript-lang / rescript-lang.org

Official documentation website for the ReScript programming language
https://rescript-lang.org
MIT License
1.85k stars 248 forks source link

Separator drag not reflecting layout changes after resize in playground #870

Closed WooWan closed 6 months ago

WooWan commented 6 months ago

I discovered the new playground and love using it! I'm super grateful for all the hard work. 😊 However, I found a drag issue after resizing the playground.

https://github.com/rescript-association/rescript-lang.org/assets/47740690/d531af5d-6505-40f8-bb1a-8ad7dd38d091

After resizing the window, the layout switches between Row and Column as expected. However, dragging the code separator does not correctly adjust the dimensions of the elements based on the new layout because it does not use latest layout value.

Suggestion

  1. Add the layout in useEffect dependencies It causes effect run again when layout is changed

  2. Use a ref to store the latest layout value Additonal effect to update the ref

    
let (layout, setLayout) = React.useState(...)
let layoutRef = React.useRef(layout)

React.useEffect(() => { layoutRef.current = layout }, [layout])



Which way do you think is better? If you have a better one, please let me know!
fhammerschmidt commented 6 months ago

It was indeed just a missing hooks dependency, fix here: https://github.com/rescript-association/rescript-lang.org/commit/b6c7172a5f9214a03eaa504d1da490b4c4aa3365 Thanks for reporting.