StrictMode breaks Masonry

[solarlime]

Hello, everyone!

I tried to use 'react-masonry-component' but found very strange behaviour (as for me). Wrapping with <React.StrictMode> breaks masonry - it does not set any positioning.

Layout with and without StrictMode:

Inline styles with and without StrictMode:

It can be fixed by adding { position: relative } to a parent and { position: absolute } to children, but it's a dirty fix: also masonry stops rebuilding on resize, you need to trigger the layout function. Any ideas?

Reproduced in Codesandbox

[hussain-nz]

Thanks for helping us fix our issue too! We upgraded to React 18 and got the same issue.
Using "position: relative" on the parent's "style" property didn't work. It worked when using a class in className (in our case, tailwind "relative").

[cavemon]

Regarding triggering the layout function on window resize, this is the route I went:

Create a hook:
hooks/useWindowWidth.tsx

import React, {useState, useEffect} from 'react'

const useWindowWidth = () => {
    const [windowWidth, setWindowWidth] = useState(undefined);

    useEffect(() => {
        const handleResize = () => {
            setWindowWidth(window.innerWidth);
        }

        window.addEventListener('resize', handleResize);
        handleResize();

        // Remove event listener on cleanup
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return windowWidth;
}

export default useWindowWidth

Then in my component which holds masonry, create a ref and add it to the <Masonry> component. When windowSize changes, we call .performLayout() on the masonry instance

import {useEffect, useRef} from "react";
import Masonry, {MasonryOptions} from 'react-masonry-component';
import useWindowWidth from "hooks/useWindowWidth";

const MasonryGrid = () => {
    const masonry = useRef(undefined)
    const windowSize = useWindowWidth();

    useEffect(() => {
        if (masonry.current) {
            masonry.current.performLayout()
        }
    }, [windowSize])

    return (
        <Masonry ref={masonry} style={{position: 'relative'}}>
            {/* This is a grid item */}
            <div style={{position: 'absolute'}}></div>
        </Masonry>
    )
}