title: How to api call in onChange function on CheckBox field React js
body: <p><a href="https://i.stack.imgur.com/dIzPm.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dIzPm.gif" alt="enter image description here" /></a></p>
  <p>I want to call a post API while changing the checkbox input?
  Right now I am doing this in the below pattern but while Component re-render this API function got called? What to do, please?</p>
  <pre><code> const [check, setCheck] = useState();
   
    async function fetchConfigApi() {
      try {
         const result = await axios.get(`/configuration/${system_id}`);
         const { status, data } = result;
         setConfigData(data);
         setCheck(data.self_service);
      } catch (e) {
        console.log(&quot;error response&quot;, e.response);
      }  
    }
  
    async function postSelfService() {
     try {
        const fd = new FormData();
        fd.append(&quot;self_service&quot;, check);
        const result = await axios.put(`/configuration/${system_id}`, fd);
        fetchConfigApi();
      } catch (e) {
        console.log(&quot;error response&quot;, e.response);
      }   
    }  
  
    const onSelfServiceChange = (e) =&gt; { setCheck(!check); };
  
    useEffect(() =&gt; { fetchConfigApi(); }, []);
  
    useEffect(() =&gt; { postSelfService(); }, [check]);
  
  return (
      &lt;div className={classes.subContainer}&gt;
          &lt;div&gt;
            &lt;FormControlLabel
              control={
                 &lt;Checkbox
                  checked={check}
                 onChange={onSelfServiceChange}
                   name=&quot;check&quot;
                 /&gt;
               }
               label=&quot;Enable Self Service&quot;
             /&gt;    &lt;/div&gt; )
  </code></pre>