React higher-order component - Warning: Cannot update a component from inside the function body of a different component

Asked
Active3 hr before
Viewed126 times

7 Answers

differentfunctioncomponentreact
90%

Warning: Cannot update a component from inside the function body of a different component. in Unknown (at ApiData.tsx:34) <-- this line: ok: value => <WrappedComponent data={value} />, Should a rookie hint be mentioned in the documentation or not? ,Connect and share knowledge within a single location that is structured and easy to search.

I noticed that your parameters might have been in the wrong order. Typically for a HOC you want to take the wrapped component first, and return a function that take props and returns JSX involving the wrapped component in some way.

// next two lines have been swapped
export default (WrappedComponent: ComponentType<DataProps<TData>>) => { 
  return ({ key, data, get, loaderSize }: ApiProps<TKey, TData>) => {
    const dispatch = useDispatch()
    if (!data) {
      dispatch(get.request(key))
      return <span>&nbsp;</span>
    } else if (data === "loading") {
      if (!loaderSize || loaderSize === "inline") {
        return <span><Preloader className={styles.preloader} /></span>
      } else {
        return <Preloader size={loaderSize} />
      }
    } else {
      if (data.isFail()) {
        return <span>An error occurred: {data.unwrapFail()}</span>
      } else {
        return <WrappedComponent data={data.unwrap()} />
      }
    }
  }
}
load more v
88%

Queueing state updates in other components while rendering a function component is the issue.,Queueing an update for any other component from within the actual rendering body of a function component is illegal.,If this is correct, can React give more information here? Perhaps telling us both the initiating component and the components that it caused to be updated?

console.error node_modules / react - dom / cjs / react - dom.development.js: 88
Warning: Cannot update a component from inside the
function body of a different component.
in Route(at App.tsx: 37) in View(created by StackManagerInner) in ViewTransitionManager(created by StackManagerInner) in ion - router - outlet(created by IonRouterOutlet) in IonRouterOutlet(created by ForwardRef(IonRouterOutlet)) in ForwardRef(IonRouterOutlet)(created by StackManagerInner) in StackManagerInner(created by Context.Consumer) in Unknown(created by Component) in Component(created by ForwardRef(IonRouterOutlet)) in ForwardRef(IonRouterOutlet)(at App.tsx: 36) in ion - split - pane(created by IonSplitPane) in IonSplitPane(created by ForwardRef(IonSplitPane)) in ForwardRef(IonSplitPane)(at App.tsx: 34) in NavManager(created by RouteManager) in RouteManager(created by Context.Consumer) in RouteManager(created by IonReactRouter) in Router(created by BrowserRouter) in BrowserRouter(created by IonReactRouter) in IonReactRouter(at App.tsx: 33) in ion - app(created by IonApp) in IonApp(created by ForwardRef(IonApp)) in ForwardRef(IonApp)(at App.tsx: 32) in App(at App.test.tsx: 6)
load more v
72%

Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.,Warn when a function component is updated during another component’s render phase (@acdlite in #17099),A React component should not cause side effects in other components during rendering.

Warning: Cannot update a component from inside the
function body of a different component.
load more v
65%

Current Behavior After the most recent updates, a new warning is now logged each time we try to call navigation.setParams on a class-based component constructor.,Expected Behavior No warning should be issued (just like before the update), unless this is actually a usage bug and we are not supposed to update the navigator route params in a constructor? Should such calls get moved to componentDidMount instead?, Ask questionsWarning: Cannot update a component from inside the function body of a different component.

How to reproduce

class SomeComponent extends React.Component {

   constructor(props) {
      super(props);
      this.state = {}

      this.props.navigation.setParams({
         'test': "test"
      });
   }
}
75%

Pretag
 Pretag team - issue, fix, solve, resolve
40%

Avoid forwarding non-DOM props to components.Destructuring assignment is popular because it gives you a way to separate component-specific props from DOM/platform-specific attributes.,Destructuring assignment is used a lot in function components.These component declarations below are equivalent.,This pattern can be combined with destructuring, JSX Spread Attributes, and other components, for some serious terseness.

Pretag
 Pretag team - issue, fix, solve, resolve
22%

Published Oct 23, 2020 ,While working on a React / Next.js application I got this error:,How to handle errors in React

While working on a React / Next.js application I got this error:

Cannot update a component(`App`) while rendering a different component
function MyApp({ Component, pageProps }) {
  const [lessonsRead, setLessonsRead] = useState()

  return (
    <Component
      lessonsRead={lessonsRead}
      setLessonsRead={setLessonsRead}
      {...pageProps}
    />
  )
}
if (courseData && courseData.lessonsRead) {
   setLessonsRead(courseData.lessonsRead)
}
useEffect(() => {
   if (courseData && courseData.lessonsRead) {
      setLessonsRead(courseData.lessonsRead)
   }
}, [courseData])
load more v

Other "different-function" queries related to "React higher-order component - Warning: Cannot update a component from inside the function body of a different component"