How does the values in react template part are in sync with local storage?

Arun Kumar — Wed, 22 Sep 2021 08:26:41 +0000

Hi Team,

I'm trying to use localStorage for state management. In the below code if I remove the setState call in the handleChange function, the template isn't in sync with the localstorage. However if I use the setState then the values in localStorage in reflecting the template. Any idea on how the presence of setState is allowing the synchronization.

Here is the code sandbox link: https://codesandbox.io/s/loving-taussig-p7phs?file=/src/App.js

import React, { useState, useEffect } from "react";

export default function App(props) {
  const [state, setState] = useState({ name: "", city: "" });

  const handleChange = (evt) => {
    setState(function (state) {
      return { ...state, [evt.target.name]: evt.target.value };
    });
    localStorage.setItem([evt.target.name], evt.target.value);
  };

  return (
    <div>
      <h2> Home</h2>
      <input
        placeholder="Name"
        name="name"
        value={localStorage.getItem("name")}
        onChange={handleChange}
      />
      <input
        name="city"
        placeholder="City"
        value={localStorage.getItem("city")}
        onChange={handleChange}
      />

      <h3> {localStorage.getItem("name")} </h3>
      <h3> {localStorage.getItem("city")} </h3>
    </div>
  );
}

Using serviceworker and workbox in react app

Arun Kumar — Fri, 27 Dec 2019 12:33:28 +0000

I'm trying to make a react pwa app using the service workers and Google workbox. The custom-service-worker file is in the /public folder of the react app and the default ServiceWorker.js file create by react app is in the /src.
I'm getting below error. Any idea on why this error is occuring? Should I refer to the custom-service-worker.js file in the index.html file?

Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://127.0.0.1:8080/precache-manifest.293755a47c2781150c8b4c921fc7a770.js' failed to load.
    at http://127.0.0.1:8080/service-worker.js:16:1

Here is the content of the service-worker file:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');
if (workbox) {
  console.log(`Yay! Workbox is loaded 🎉`);
} else {
  console.log(`Boo! Workbox didn't load 😬`);
}
  workbox.routing.registerRoute(
    // Cache CSS files.
    /\.css$/,
    // Use cache but update in the background.
    new workbox.strategies.StaleWhileRevalidate({
      // Use a custom cache name.
      cacheName: 'css-cache',
    })
  );
  workbox.routing.registerRoute(
    new RegExp('https://jsonplaceholder.typicode.com/posts'),
    new workbox.strategies.StaleWhileRevalidate({
      cacheName: 'app-cache',
    })
  );

DEV Community: Arun Kumar

How does the values in react template part are in sync with local storage?

Using serviceworker and workbox in react app