What are some examples of using useLayoutEffect in React?

What are some examples of using useLayoutEffect in React?

The useLayoutEffect hook is used to perform side effects in React components. It runs synchronously after all DOM mutations. Here are a couple of examples:

1. Measuring DOM elements: You can use useLayoutEffect to measure the size of a DOM element after it has been rendered.

2. Animating elements: If you need to perform animations based on the layout, useLayoutEffect ensures that the DOM is updated before the browser paints the screen.

Can you show me a code example for measuring a DOM element?

Sure! Here's a simple example:

import React, { useLayoutEffect, useRef, useState } from 'react';

const MeasureComponent = () => {
    const ref = useRef(null);
    const [size, setSize] = useState({ width: 0, height: 0 });

    useLayoutEffect(() => {
        if (ref.current) {
            setSize({
                width: ref.current.offsetWidth,
                height: ref.current.offsetHeight,
            });
        }
    }, []);

    return (
        <div ref={ref} style={{ width: '50%', height: '100px', background: 'lightblue' }}>
            Width: {size.width}, Height: {size.height}
        </div>
    );
};

This component measures its own width and height after rendering.

What about using useLayoutEffect for animations?

For animations, you can use useLayoutEffect to set the initial state before the browser paints. Here's an example:

import React, { useLayoutEffect, useRef, useState } from 'react';

const AnimatedComponent = () => {
    const ref = useRef(null);
    const [isVisible, setIsVisible] = useState(false);

    useLayoutEffect(() => {
        if (ref.current) {
            ref.current.style.opacity = 0;
            setIsVisible(true);
            requestAnimationFrame(() => {
                ref.current.style.transition = 'opacity 0.5s';
                ref.current.style.opacity = 1;
            });
        }
    }, []);

    return <div ref={ref} style={{ opacity: 0 }}>Hello, I will fade in!</div>;
};

This component fades in when it mounts.