title: Use mobx and react get an error: Too many re-renders. React limits the number of renders to prevent an infinite loop
body: <p>In my mind, I want use mobx to save a state named mask, when I use axios, this state will be true and when i finshed call, this state will be false, below is my code</p>
  <p>store.tsx</p>
  <pre><code>import { makeAutoObservable, runInAction } from 'mobx';
  import axios from 'axios';
  
  class Store {
  
  isHeaderShow = false;
  
  isTabBarShow = false;
  
  isShowingMovies = [];
  
  isShowingMovieIds = [];
  
  willShowingMovies = [];
  
  willShowingMovieIds = [];
  
  isLoading = false;
  
  
  constructor() {
      makeAutoObservable(this);
  }
  
  
  getShowingMovies = async () =&gt; {
      if (this.isShowingMovies.length === 0) {
          this.isLoading = true;
          let res = await axios.get(`http://localhost:3000/movie/ajax/movieOnInfoList`).then((res) =&gt; {
              return res.data;
              this.isLoading = false;
          })
          runInAction(() =&gt; {
              this.isShowingMovies = res.movieList;
              this.isShowingMovieIds = res.movieIds;
             
          })
      }
  }
  }
  
      const store = new Store();
      
      export default store
  </code></pre>
  <p>mask.tsx</p>
  <pre><code>import React, { useState, FC } from 'react'
  import { Mask } from 'antd-mobile'
  import store from '../../mobx/store'
  import { observer } from 'mobx-react';
  
  const SimpleMask: FC = () =&gt; {
      const [visible, setVisible] = useState(false)
      setVisible(store.isLoading);
      return (
          &lt;&gt;
              &lt;Mask visible={visible} /&gt;
          &lt;/&gt;
      )
  }
  
  export default observer(SimpleMask)
  </code></pre>
  <p>App.tsx</p>
  <pre><code>import React from 'react';
  import './App.css';
  import Header from './component/header'
  import Footer from './component/footer'
  import Mask from './component/mark'
  
  function App() {
    return (
      &lt;div className=&quot;container&quot;&gt;
        &lt;div className='header'&gt;
          &lt;Header /&gt;
        &lt;/div&gt;
        &lt;div className='main'&gt;This is main&lt;/div&gt;
        &lt;div className='footer'&gt;
          &lt;Footer /&gt;
        &lt;/div&gt;
        &lt;Mask/&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>package.json</p>
  <pre><code>&quot;dependencies&quot;: {
      &quot;@testing-library/jest-dom&quot;: &quot;^5.16.2&quot;,
      &quot;@testing-library/react&quot;: &quot;^12.1.3&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^13.5.0&quot;,
      &quot;@types/jest&quot;: &quot;^27.4.1&quot;,
      &quot;@types/node&quot;: &quot;^16.11.26&quot;,
      &quot;@types/react&quot;: &quot;^17.0.39&quot;,
      &quot;@types/react-dom&quot;: &quot;^17.0.13&quot;,
      &quot;antd-mobile&quot;: &quot;^5.4.0&quot;,
      &quot;axios&quot;: &quot;^0.26.0&quot;,
      &quot;mobx&quot;: &quot;^6.4.2&quot;,
      &quot;mobx-react&quot;: &quot;^7.3.0&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;,
      &quot;react-scripts&quot;: &quot;5.0.0&quot;,
      &quot;typescript&quot;: &quot;^4.6.2&quot;,
      &quot;web-vitals&quot;: &quot;^2.1.4&quot;
    },
  </code></pre>
  <p>the error is below
  <a href="https://i.stack.imgur.com/tTzYS.png" rel="nofollow noreferrer">error info</a></p>
  <p>Could u guys give me some advices? I'm first use react and mobx and want to improve.
  Thank u very much!</p>