React Native: What is the difference between useEffect and useLayoutEffect in React Native?

useEffect — after render. useLayoutEffect — before paint.

useEffect:

• Runs after render.
• Asynchronous.
• Blocks painting.
• Most common.

1useEffect(() => {
2    // Runs after render
3    console.log("Component rendered");
4
5    return () => {
6        // Cleanup
7    };
8}, [dependency]);

useLayoutEffect:

• Runs before paint.
• Synchronous.
• Blocks painting.
• Rarely needed.

1useLayoutEffect(() => {
2    // Runs before paint
3    console.log("Before paint");
4
5    return () => {
6        // Cleanup
7    };
8}, [dependency]);

Key differences:

• useEffect — after render, async.
• useLayoutEffect — before paint, sync.
• useEffect — most common.
• useLayoutEffect — for measurements.