| 1 | // @flow |
| 2 | component Example() { |
| 3 | const fooRef = useRef(); |
| 4 | |
| 5 | function updateStyles() { |
| 6 | const foo = fooRef.current; |
| 7 | // The access of `barRef` here before its declaration causes it be hoisted... |
| 8 | if (barRef.current == null || foo == null) { |
| 9 | return; |
| 10 | } |
| 11 | foo.style.height = '100px'; |
| 12 | } |
| 13 | |
| 14 | // ...which previously meant that we didn't infer a type... |
| 15 | const barRef = useRef(null); |
| 16 | |
| 17 | const resizeRef = useResizeObserver( |
| 18 | rect => { |
| 19 | const {width} = rect; |
| 20 | // ...which meant that we failed to ignore the mutation here... |
| 21 | barRef.current = width; |
| 22 | } // ...which caused this to fail with "can't freeze a mutable function" |
| 23 | ); |
| 24 | |
| 25 | useLayoutEffect(() => { |
| 26 | const observer = new ResizeObserver(_ => { |
| 27 | updateStyles(); |
| 28 | }); |
| 29 | |
| 30 | return () => { |
| 31 | observer.disconnect(); |
| 32 | }; |
| 33 | }, []); |
| 34 | |
| 35 | return <div ref={resizeRef} />; |
| 36 | } |