component state disappears after page is refreshed

I have a custom hook

import { useState } from "react";
import { useDispatch } from "react-redux";
import axios from "axios";
import getDevices from "../actions/devicesAtions";
import { isPositiveInteger, FORM_FIELDS } from "../helper";

export default function useDevice(value) {
  const dispatch = useDispatch();
  const [device, setDevice] = useState(value);
  const [msg, setMsg] = useState("");

  const saveDeviceChange = ({ target }) => {
    const { name, value } = target;

    setDevice({
      ...device,
      [name]: value
    });
    setMsg("");
  };

  const saveDeviceSubmit = async (
    e,
    axiosMethod,
    selectedUrl,
    newDevice = device
  ) => {
    e.preventDefault();
    const { system_name, type, hdd_capacity } = device;

    if (!system_name || !type || !hdd_capacity) {
      setMsg(
        `Please fill out ${!system_name ? FORM_FIELDS.SYS_NAME : ""} ${
          !type ? FORM_FIELDS.DEVICE_TYPE : ""
        } ${!hdd_capacity ? FORM_FIELDS.HDD_CAPACITY : ""}!`
      );
      return false;
    }

    if (!isPositiveInteger(hdd_capacity)) {
      setMsg(
        "Please enter a positive number or round it to the nearst whole number!"
      );
      return false;
    }

    try {
      await axios({
        method: axiosMethod,
        url: selectedUrl,
        data: device,
        headers: {
          "Content-Type": "application/json"
        }
      });
      dispatch(getDevices());
    } catch (err) {
      console.log(err);
    }

    setMsg("Changes have been made!");
    setDevice(newDevice);
  };

  return {
    device,
    setDevice,
    msg,
    setMsg,
    saveDeviceChange,
    saveDeviceSubmit
  };
}

The EditDeviceWrapper component uses the states and functions from the custom hook. When this component renders, the selectedDevice is assigned as the value for the device that's from the custom hook. When first rendered, the values are displayed correctly on the from. However, after I clicked refresh, the device state from the custom hook disappear while the selectedDevice state from the redux still exits. How to maintain the device state from the custom hook after refreshing the the component?

import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { useParams } from "react-router-dom";

import ReusedForm from "./ReusedForm";
import useDevice from "./useDevice";
import { getDeviceDetails } from "../actions/devicesAtions";

export default function EditDeviceWrapper() {
  const dispatch = useDispatch();
  const { selectedDevice } = useSelector((state) => state.allDevices);
  const { id } = useParams();

  useEffect(() => {
    dispatch(getDeviceDetails(id));
  }, [id, dispatch]);

  const { device, msg, saveDeviceChange, saveDeviceSubmit } = useDevice(
    selectedDevice
  );
  console.log(device, selectedDevice);

  return (
    <>
      <p className="form-msg">{msg}</p>

      <ReusedForm
        saveDeviceSubmit={(e) =>
          saveDeviceSubmit(e, "put", `http://localhost:3000/devices/${id}`)
        }
        selectDeviceValChange={saveDeviceChange}
        heading="Update Device"
        system_name={device.system_name}
        type={device.type}
        hdd_capacity={device.hdd_capacity}
      />

      <p>{id}</p>
    </>
  );
}

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW