score:2
it does appear that this is an actual bug in the timing of the execution of uselayouteffect
for a component within suspense
where some other component is lazy loaded. if appbarheader
is lazy loaded and counter
is not, it works fine, but with counter
lazy loaded, appbarheader
's uselayouteffect
executes before it is fully rendered in the dom (height is still zero).
this sandbox "fixes" it in a very hackish way that helps further demonstrate what is going on.
i added the following to app.js
:
replacerefheader = () => {
this.setstate({ ref_header: react.createref() });
};
and then passed this to counter
:
<counter replacerefheader={this.replacerefheader} history={routeprops.history} />
then in counter
:
const counter = ({ replacerefheader }) => {
uselayouteffect(() => {
replacerefheader();
}, []);
and then i put [props.ref_header]
in the dependency array of appbarheader
's uselayouteffect
.
i'm not proposing that this is what you should do (though something like this could work as a temporary workaround). this was just to demonstrate the timing issue more clearly.
i've logged a new issue here: https://github.com/facebook/react/issues/14869
Source: stackoverflow.com
Related Query
- React Hooks: Lazy Loading Breaks useLayoutEffect?
- How to apply lazy loading in flatlist in react native
- React lazy loading - when to use
- Lazy loaded React router routes loading anyway
- React Suspense lazy loading without fallback
- Loading React hooks using dynamic imports?
- React Native lazy loading 250 images in a Scroll View
- Lazy loading in react - the component is not loading
- Webpack 2 configuration for Tree shaking and lazy loading with System.import on React project
- Lazy loading embedded YouTube videos in React
- React lazy loading javascript file
- How can I implement lazy loading of data on react table?
- React Lazy loading import failing
- Lazy Loading Routes in React With Typescript AsyncComponent
- How to make a lazy loading high order component in React
- React server side rendering and lazy loading of webpack
- React Material UI - Tabs - How to disable lazy loading of tabs?
- Loading is not showing in react hooks
- Getting SCRIPT1028 error on Edge when using react lazy loading
- React useState Hooks - managing multiple loading states within a state
- Unable to see Loading text in react hooks home page
- Must I specify unique Loading booleans when fetching data via multiple async functions within useEffects in React hooks to avoid concurrency problems?
- Props received after api hit in Redux loading two times results in React Hooks
- Best practises React hooks HTTP loading
- Lazy loading with react router v6 beta
- Using React Hooks in in an IIFE breaks rules of hooks
- React Lazy Loading Issue in 16.13.0
- React 18 - Infinite rendering when passing a state variable for lazy loading
- Lazy Loading Images in Next.js and/or in other forms of React server-side rendering
- How to use React Lazy loading for redux connected component?
More Query from same tag
- React Hotkeys cannot access updated state
- mapStateToProps function , targeting id of the post instead of all the posts
- Django & ReactJS no template being rendered
- Displaying JSON object in React( JSX ) is giving undefined
- Nested components with React Router
- How to get current zoom in React-Mapbox-GL?
- Uncaught Error: AllPostsComments.render(): A valid ReactComponent must be returned
- Cannot read property 'setState' of undefined
- Gatsby.js problem with <Link>, no matter what I try
- Why isn't my media query taking priority over my inline JSX styling?
- How to use some React libraries in a class component
- how to delete a single item using axios in react
- Multiple subscriptions in AWS Amplify react Connect component
- Create react HOC with props children
- Add input validation to html input in React
- Runtime DEV environment variable for React Js (web)
- Read data url in for each promise?
- Getting selected items in Fluent UI DetailsList
- About retrieving page name in index page
- React Bootstrap Modal appears under the rest of the content instead of overlay.
- Mapping a JSON const in React.js
- How to remove semicolons in prettier?
- Why won't my app render when state changes?
- TypeError: Cannot read property 'contextTypes' of undefined
- React.Component class constructor runs once without console.log?
- React Native marginTop offsetting text position in TouchableOpacity
- Filtering away javascript objects into an array when using fetch
- fixed element not remaining fixed with parralax scrolling
- ReactJS Modal component won't close onclick
- Why cant we print a variable with html names included in it?