useLayoutEffect : ( ) => { } type Width = number type Height = number type Size = [ Width , Height ] export const getViewportSize = ( ) : Size => { if ( window . visualViewport ) { return [ window . innerHeight , ] as const } const useViewportSize = ( ) => { const [ viewportSize , setViewportSize ] = useState < Size | undefined > ( ) const updateViewportSize = useCallback ( ( ) => { const viewportSize = getViewportSize ( ) setViewportSize ( ( oldViewportSize ) => { if ( oldViewportSize && oldViewportSize [ 0 ] === viewportSize [ 0 ] && oldViewportSize [ 1 ] === viewportSize [ 1 ] ) { return oldViewportSize } return viewportSize } ) } , [ ] ) useBrowserLayoutEffect ( updateViewportSize , [ updateViewportSize ] ) useEffect ( ( ) => { const effectTwice = ( ) => { updateViewportSize ( )…