Warning: Cannot update a component from inside the function body of a different component.

[MartinSoderholm]

Warning: Cannot update a component from inside the function body of a different component.
    in InView (created by VerticalTimelineElement)
    in VerticalTimelineElement (created by AirportFixtureView)
    in div (created by VerticalTimeline)
    in VerticalTimeline (created by <OurComponent>)

Reproduce

1. Install package.
2. Copy/paste code from README / Usage.

Solution?

I'm not experienced with hooks, but my guess is the below code is causing the issue:

  ...
  textClassName,
  intersectionObserverProps,
  visible: defaultVisible,
}) => {
  const [visible, setVisible] = useState(defaultVisible);

  return (
    <InView {...intersectionObserverProps}>
      {({ inView, ref }) => {
        if (!visible && inView) {
>>>       setVisible(true);   <<<
        }
        return (
          <div
            ref={ref}
  ...

Won't calling setVisible here trigger a re-render of the component while rendering the component?

⚠︎ Update

Warning is not present in version 3.2.0.

[MartinSoderholm]

Unrelated question: Is there a static version of this component without animation or InView functionality? Thanks,

[AdeilsonESilva]

Same error where!

[dejongyeong]

Same error here! I'm a beginner here as well but I suspect that it might be related to react-intersection-observer

[AdeilsonESilva]

@stephane-monnot can u help us?

[stephane-monnot]

Fixed in v3.3.1

[AdeilsonESilva]

TKS....

[alexcamerondev]

Oh, I see this issue is known, I will delete my issue with this and update the codebase. Thanks