react-intersect | react component which observes when an element becomes | Frontend Framework library

When I run gatsby develop in console this error shows up:

...

I'm working on a react project and trying to animate and show the divs once they're in the view. I'm using the useInView hook from 'react-intersection-observer' to determine if the div is in the view and then start the animation to make the div visible.

However, this doesn't work fine when I have two divs in the same component i.e, as soon as the first div is in the view - animate and show the first div, and when you scroll further as soon as the second div is in the view - animate and show the second div.

Any help would be appreciated.

Here's the code:

According to the code below, I need to call a function whenever inView is true, but using useEffect and useCallback listing the dependencies, I cause an infinite loop. The only ways I managed to avoid it were without listing the dependencies, but I get a warning that I have to list them. I tried only with useEffect, but the result is the same, listing the dependencies, I have a problem with the loops. Here is the code:

I'm trying to use React Hooks in my HOC to pass an event to parent that says when this component is on Viewport, to lazy load this component data using React Intersection Observer, but I'm struggling with the following error: Type '(props: IStockProps) => JSX.Element | JSX.Element[]' is not assignable to type 'FC'.

I started recently with Typescript and I'm still getting on how to read these errors and sometimes can be a bit confusing. This are my code

HOC

I am having an issue with framer-motion AnimatePresence component. I am trying to start the animation after the component is visible within the viewport, to achieve this, I used react-intersection-observer. It works as intended for the starting animation, but the exit animation breaks and I am not sure what is causing the problem. I created a sandbox that reproduces this behavior at https://codesandbox.io/s/holy-dream-rb5gu?file=/src/index.js

I'm using react spring to animate an object translating up the page and disappearing. For some reason, the object is moving the same speed throughout the animation, no matter what I set the spring configs to. I currently have:

I am seeing this issue 100% of the attempts at building webpack for production. I've tried the approach mentioned on the other similar StackOverflow issues which is NODE_OPTIONS=--max_old_space_size=8192

my build command is:

We have an application (a website) with some React components, css and js compiled with webpack.

Our workflow is to npm run start in the /src/ folder while developing locally, which generates CSS and JS files in /dist/ then run npm run build to clear down refresh all the files in the /dist/ folder before deploying to live. That is the intent, anyway.

The problem is, when we deploy a change to the live environment, it seems the browser still has previous versions of the CSS/JS files cached, or not reading correctly from the new versions. This only happens with the hashed/chunked (React component) files (see ** in file structure below), not the main.js or main.scss file.

We thought webpack produced new 'chunks'/files with each build. Is there a way we can force webpack to do this so the files are read as new when they change, or the filenames are different? I do want the files to be cached by the browser, but I also want new changes to be accounted for.

Example File Structure

I manage to use react-intersection-observer in a Function Component. However, I have not been successful when using it with a Class Component. I tried to follow the documentation but I am getting the following error:

Invariant failed: react-intersection-observer: No DOM node found. Make sure you forward "ref" to the root DOM element you want to observe.

What am I doing wrong? Thank you in advance.

Pseudo-code

• Trigger animation when the element is visible in the viewport.

CodesandBox