title: Cannot update a component from inside the function body of a different component
body: <p>In reactJS, I want to create a function that will be in charge of loading data.</p>
  
  <p>The call of this function is done within the <code>Controller</code>, children of my component.</p>
  
  <p>I also want to recall the <code>loadData</code> function from the <code>Controller</code> when <code>state.perPage</code> and <code>state.page</code> change.</p>
  
  <p>I have switch from class component to function component but the error remain:</p>
  
  <pre><code>Cannot update a component from inside the function body of a different component
  </code></pre>
  
  <p>This is my component:</p>
  
  <pre><code>const MyPromotionsController = (props) =&gt; {
    const {
      children,
      fetchSuccess,
      t,
      loadingComponent: LoadingComponent,
      pagination: initialPagination,
      sort,
      filter,
      ...rest // eslint-disable-line no-unused-vars
    } = omit(props, [
      'setLocale',
      'locale',
    ]);
    const dataProvider = useDataProvider();
    const [pagination, setPagination] = useState(initialPagination);
  
    const _loadData = () =&gt; {
      const params = {
        pagination,
        sort,
        filter,
      };
      return dataProvider
        .getList('merchants/promotions', params);
    };
  
    return (
      &lt;Controller
        pagination={pagination}
        FetchStart={LoadingComponent}
        FetchError={TranslatedFetchError}
        loadData={_loadData}
        onFetchSuccess={fetchSuccess}
        fetchStartMessages={{
          fetching: 'promotionsController.fetchStart.fetching',
        }}
        fetchErrorMessages={{
          error: 'promotionsController.fetchError.error',
        }}
      &gt;
        {cloneElement(children, {
          pagination,
          setPagination,
        })}
      &lt;/Controller&gt;
    );
  };
  </code></pre>
  
  <p>I have tried to use <code>useEffect</code> like this but now the function never get called:</p>
  
  <pre><code>const MyPromotionsController = (props) =&gt; {
    const {
      children,
      fetchSuccess,
      t,
      loadingComponent: LoadingComponent,
      pagination: initialPagination,
      sort,
      filter,
      ...rest // eslint-disable-line no-unused-vars
    } = omit(props, [
      'setLocale',
      'locale',
    ]);
    const dataProvider = useDataProvider();
    const [pagination, setPagination] = useState(initialPagination);
  
    let _loadData = () =&gt; {};
    useEffect(() =&gt; {
      _loadData = () =&gt; {
        const params = {
          pagination,
          sort,
          filter,
        };
        return dataProvider
          .getList('merchants/promotions', params);
      };
    }, [pagination]);
  
    return (
      &lt;Controller
        pagination={pagination}
        FetchStart={LoadingComponent}
        FetchError={TranslatedFetchError}
        loadData={_loadData}
        onFetchSuccess={fetchSuccess}
        fetchStartMessages={{
          fetching: 'promotionsController.fetchStart.fetching',
        }}
        fetchErrorMessages={{
          error: 'promotionsController.fetchError.error',
        }}
      &gt;
        {cloneElement(children, {
          pagination,
          setPagination,
        })}
      &lt;/Controller&gt;
    );
  };
  </code></pre>
  
  <p>This is the controller:</p>
  
  <pre><code>class Controller extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        loading: 0,
        data: null,
        error: null,
      };
    }
  
    async componentDidMount() {
      await this.refreshData();
    }
  
    async UNSAFE_componentWillReceiveProps(nextProps) {
      if (JSON.stringify(this.props.pagination) !== JSON.stringify(nextProps.pagination)) {
        console.log(nextProps);
        await this.refreshData();
      }
    }
  
    refreshData = async () =&gt; {
      const {
        loadData,
        onFetchStart,
        onFetchSuccess,
        onFetchError,
        fetchStart,
        fetchSuccess,
        fetchError,
        fetchErrorMessages: { error: errorMessage },
        t,
      } = this.props;
      this.setState({
        loading: 1,
      });
      try {
        fetchStart();
        if (onFetchStart) {
          onFetchStart();
        }
        const data = await loadData();
        this.setState({
          data,
          loading: 0,
          error: null,
        });
        fetchSuccess(data);
        if (onFetchSuccess) {
          onFetchSuccess(data);
        }
      } catch (e) {
        console.log(e);
        const error = new Error(t(errorMessage));
        fetchError(error);
        this.setState({
          data: null,
          loading: 0,
          error,
        });
        if (onFetchError) {
          onFetchError(new Error(t(errorMessage)));
        }
      }
    };
  
    render() {
      const {
        children,
        fetchStartMessages,
        fetchErrorMessages,
        FetchStart,
        FetchError,
        ...rest
      } = omit(this.props, [
        'onFetchSuccess',
        'onFetchStart',
        'onFetchError',
        'fetchSuccess',
        'fetchStart',
        'fetchError',
        't',
        'setLocale',
        'locale',
      ]);
      const { loading, data, error } = this.state;
  
      if (!error &amp;&amp; !data &amp;&amp; FetchStart) {
        return (
          &lt;FetchStart
            messages={fetchStartMessages}
          /&gt;
        );
      }
      if (error &amp;&amp; FetchError) {
        return (
          &lt;FetchError
            loading={loading}
            error={error}
            onPress={this.refreshData}
            messages={fetchErrorMessages}
          /&gt;
        );
      }
  
      return cloneElement(children, {
        ...rest,
        data,
        error,
        loading,
        refreshData: this.refreshData,
      });
    }
  }
  </code></pre>
  
  <p>How can I fix those warnings ?</p>