title: How to prevent react page refresh when file changes in src folder
body: <p>I have a typescript react project with a simple JSON file as a database. The website has a form that when submitted sends an API request using <a href="https://www.npmjs.com/package/axios" rel="nofollow noreferrer">axios</a> to a local server that makes changes to the file. </p>
  
  <p>My problem is that whenever the JSON file is changed (Manually or Via code) the site refreshes. How can I prevent this?</p>
  
  <p>The component:</p>
  
  <pre><code>import React, { useState } from "react";
  import Form from "react-bootstrap/Form";
  import Col from "react-bootstrap/Col";
  import Row from "react-bootstrap/Row";
  import Button from "react-bootstrap/Button";
  import FormControl from "react-bootstrap/FormControl";
  import api from '../../backend/Services/api'
  
  
  const Workout = (props: any) =&gt; {
      const [day, setDay] = useState(props.workout.day);
      const [time, setTime] = useState(props.workout.time);
      const [type, setType] = useState(props.workout.type);
  
      const handleSave = (e: any) =&gt; {
          e.preventDefault();
  
          console.log(
              `Updating workout (${props.workout.id})- day: ${day}, time: ${time}, type: ${type} `
          );
          // updateJson(props.workout.id, day, time, type);
          console.log('Before wait')
          // let response = await api.patch(`/modify/${props.workout.id}/${day}/${time}/${type}/`)
  
          api.patch(`/modify/${props.workout.id}/${day}/${time}/${type}/`)
          .then(response =&gt; {console.log('Response: ' + response.data.msg)})
          .catch(e =&gt; {console.log(e)})   
      };
  
  
      return (
          &lt;tr&gt;
              &lt;td colSpan={4}&gt;
                  &lt;Form&gt;
                      &lt;Form.Group&gt;
                          &lt;Row&gt;
                              &lt;Col&gt;
                                  &lt;Button
                                      variant="primary"
                                      type="button"
                                      onClick={handleSave}
                                  &gt;
                                      Save
                                  &lt;/Button&gt;
                              &lt;/Col&gt;
                              &lt;Col&gt;
                                  &lt;Form.Group&gt;
                                      &lt;FormControl
                                          onChange={(e: any) =&gt; {
                                              setDay(e.target.value);
                                          }}
                                          as="select"
                                          defaultValue={day}
                                      &gt;
                                          &lt;option&gt;Sunday&lt;/option&gt;
                                          &lt;option&gt;Monday&lt;/option&gt;                                        
                                      &lt;/FormControl&gt;
                                  &lt;/Form.Group&gt;
                              &lt;/Col&gt;
                              &lt;Col&gt;
                                  &lt;Form.Group&gt;
                                      &lt;FormControl
                                          onChange={(e: any) =&gt; {
                                              setTime(e.target.value);
                                          }}
                                          as="select"
                                          defaultValue={time}
                                      &gt;
                                          &lt;option&gt;07:00&lt;/option&gt;
                                          &lt;option&gt;08:00&lt;/option&gt;                                        
                                      &lt;/FormControl&gt;
                                  &lt;/Form.Group&gt;
                              &lt;/Col&gt;
                              &lt;Col&gt;
                                  &lt;Form.Group&gt;
                                      &lt;FormControl
                                          onChange={(e: any) =&gt; {
                                              setType(e.target.value);
                                          }}
                                          as="select"
                                          defaultValue={type}
                                      &gt;
                                          &lt;option&gt;Endurance&lt;/option&gt;
                                          &lt;option&gt;Strength&lt;/option&gt;                                        
                                      &lt;/FormControl&gt;
                                  &lt;/Form.Group&gt;
                              &lt;/Col&gt;
                          &lt;/Row&gt;
                      &lt;/Form.Group&gt;
                  &lt;/Form&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      );
  };
  
  export default Workout
  </code></pre>
  
  <p>The api file containing the axios instance:</p>
  
  <pre><code>import axios from 'axios'
  
  const api = axios.create({
      baseURL: `/workoutApi`,
      proxy: {
          host: '127.0.0.1',
          port: 4000
      }
  })
  
  export default api
  </code></pre>
  
  <p>My package.json scripts</p>
  
  <pre><code>"scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject",
      "backend": "node_modules/.bin/ts-node --project tsconfig.api.json src/backend/Server/server.ts"
    }
  </code></pre>
  
  <p>To run I use <code>npm run backend</code> then <code>npm run start</code></p>
  
  <p>Shortly:
  JSON file in src is changed -> The page refreshes
  How can I change the JSON file without the page refreshing?</p>
  
  <p>Thanks in advance.</p>