The answer depends on what you as a developer consider 'preferable'. In the context of your question
useLayoutEffect guarantees that you will see layout before mutation,
useEffect shows you what happens after.
If you don't have DOM manipulating code in the hook and only reading layout useEffect will do just fine.
If you do have DOM manipulating code in the useEffect and see screen flickering move this code to useLayoutEffect.
It goes like this:
- useLayoutEffect (synchronously after all DOM mutations)
The following diagram always helps me to visualize the flow of hooks and also will let you clarify regarding why
useLayoutEffect is recommended over
useEffect for DOM based operations (where you're targetting stuff that you can update before current browser paint)
Link to the diagram - https://github.com/donavon/hook-flow
- Is `useLayoutEffect` preferable to `useEffect` when reading layout?
- How to fix missing dependency warning when using useEffect React Hook
- React useEffect Hook when only one of the effect's deps changes, but not the others
- useEffect not called in React Native when back to screen
- React hooks - trigger useEffect when a nested property changes in a collection of objects
- A weird error occurring when trying to implement useEffect
- useEffect when all dependencies have changed?
- When is the cleanup function triggered when using useEffect hook with dependencies?
- When using React Is it preferable to use fat arrow functions or bind functions in constructor?
- useEffect - Prevent infinite loop when updating state
- useEffect missing dependency when using redux useDispatch
- Why is a state variable's setter needed as a dependency with useEffect when passed in through props?
- useEffect not working when dependency value changed
- useEffect not being called and not updating state when api is fetched
- ReactJS: useEffect is not run when the url changes
- Skip first useEffect when there are multiple useEffects
- How to prevent useCallback from triggering when using with useEffect (and comply with eslint-plugin-react-hooks)?
- useEffect cleaning function is not called when tab is closed
- different behavior with componentDidMount than useEffect when using jquery emoji plugin
- useEffect array dependency is called in every render when array is not changed
- when using react useEffect my app is crashing
- useEffect goes in infinite loop when combined useDispatch, useSelector of Redux
- React useEffect hook does not fire when prop dependency changes
- useEffect is missing a dependency, but when I add it I get a 'maximum update depth exceeded' error
- Avoid old data when using useEffect to fetch data
- When and why to useEffect
- React - useEffect running even when there was no change in state variable
- Invalid hook call. Hooks can only be called inside of the body of a function component when i call useQuery in useEffect
- React trigger useEffect when two things changes
- Prevent infinite loop when updating state via React useEffect Hook
More Query from same tag
- Are custom hooks special functions like Function Components w.r.t. hooks?
- Isomorphic React, unable to render as string because I haven't got a valid react Element?
- How to get utility function from helper file on node.js server?
- Yup - how to check if all arrays are of the same length
- add selected multiple radio buttons value and uniqueId to an array
- Config files for different production builds React
- axios.post not returning data from server: "Cannot destructure property 'data' of '(intermediate value)' as it is undefined"
- React Fetch POST removes characters with header Content-type = application/x-www-form-urlencoded
- react router render component multiple times when refreshing
- React HOC Using useEffect()
- No overload matches this call on simple react app
- reactjs custom component input value doesnt update with state change
- React - How to separately assign click event to bunch of div's generated in loop
- React connected component not rerendering after fetching data
- How to properly configure Suspense position into Canvas?
- The value of textbox does not update in React
- How to chain promise in redux action
- mongo using mongoose in node want to use or and in query
- How to linkify hashtag in react
- How add dynamic id to FormattedMessage in react intl
- What's the best way to ensure no null values
- Where to do calculations in redux?
- how to pass new prop to rendered component
- Updating a React prop with setTimeout()
- How change value of checkbox checked using useState in React
- Why is my API call receiving repeat data when it should be random?
- How manage state of unknown number of text areas?
- checkbox is not checked reactjs
- Using map function for array of string
- File upload with react, nodeJS multer doesn't work