title: Get back a JSON file from Azure-Blob in React
body: <p>I have a react application that sends a JSON file by converting it into a string and then downloads it back. My issue is that when I am updating it (making changes in the JSON and re-uploading it to Azure Blob) and downloading it again; I need to refresh my React app to see the change/update. How to get this done in real-time without updating?</p>
  <pre class="lang-js prettyprint-override"><code>async function main() {
    // Selecting  a container
    const containerClient = blobServiceClient.getContainerClient(containerName);
          
    //This creates a blob and add content ==Models(Json file) to it
              
    const content=JSON.stringify(Models)
    const blobName=&quot;Models.json&quot;
    const blockBlobClient=containerClient.getBlockBlobClient(blobName);
    const uploadBlobResponse = await blockBlobClient.upload(content,content.length)
    console.log(`Upload block blob ${blobName} successfully`, uploadBlobResponse.requestId);
  }
  </code></pre>
  <p>I have JS code to upload the JSON(&quot;Models&quot;) file to azure-storage.</p>
  <pre class="lang-js prettyprint-override"><code>useEffect(()=&gt;{
    async function createBlob() {
      await ModelBlob();
      const res=await  ModelJsonDownload()
      const modelData= JSON.parse(res)
      setData(modelData)
      setisLoading(false)
                      
      //console.log(data.cube.props.position[0])
                  
    }
    createBlob()
  },[])
  </code></pre>
  <p>Here, I am downloading the JSON file once when the react app starts using <code>useEffect</code> hook.</p>
  <pre class="lang-js prettyprint-override"><code>useEffect(()=&gt;{
    async function createBlob(){
      //await ModelBlob();
      console.log(&quot;updating...&quot;)
      const res=await  ModelJsonDownload()
      const modelData= JSON.parse(res)
      props.setData(modelData)
      console.log(&quot;updated&quot;)
      props.setisLoading(false)
      console.log(&quot;runs on every color change&quot;)
      console.log(modelData.cube.props.color)
    }
    createBlob()
  },[props.color])   
  </code></pre>
  <p>Now, I have another <code>useEffect</code> hook for my dropdown. Basically, this runs on the <code>onChange</code> event of the dropdown. It again uploads the JSON file with different color and again downloads it. Right now, it is working only if I refresh my React app. I want it to work without refreshing the page.</p>