How to create a static variable from a state variable made with useState hook on ReactJS?-CodePudding

I am trying to get the value of a useState hook variable without having that new variable hooked when the useState variable updates ( avoiding newVariable value update when stateVariable value changes ).

For example, I have two components, App and Edit.

App.js

...
import Edit from './edit'
...
function App() {
  const [user, setUser] = useState({ name: "", password: "" });
  ...
   return(
  ...
    <Route path="/edit">
     <Edit
       socketConnected={socketConnected}
       socket={socket}
       user={user}
       setUser={setUser}
     ></Edit>
    </Route>
  ...
   );
}

Edit.js

function Edit(props) {
    const [user, setUser] = [props.user, props.setUser];
    const previousName = user.name; // Check this out.
    ...
    return (
     <label>Your previous name was: {previousName}</label>
     <input value={user.name} onChange={(e) => { setUser({ ...user, name: e.target.value }) }}></input>
    );
}

This way i should be able to change live the variable user, and have previousName stay the same, so that the user can see its previous name without updating.

Well, I've tried the following when assigning user.name's value to previousUser:

const previousName = user.name;
const previousName = user.name.toString();
const previousName = JSON.parse(JSON.stringify(user.name));
let userCloned = Object.assign({}, user); const previousName = userCloned.name;
let userCloned = { ...user }; const previousName = userCloned.name;
let userCloned = { ...user }; const previousName = userCloned.name; Object.freeze(previousName);

I have no clue how to do it, since no matter how I assign the state values to a normal variable, it STILL gets liked to the setUser hook, even after JSON parsing, which is driving me insane, and I am running out of ideas.

Any help would be appreciated, thank you.

CodePudding user response：

This is the best usecase of useRef because, useRef will keep a hold of the first instance/data that it will ever get and will never change it through out the life-cycle of the app unless been manually updated(ref.current).

 const [user, setUser] = useState({ name: "", password: "" });
 const prevUsername = useRef(user.name);

Nota bene: if you also want to get hold of the previous prop just like componentDidUpdate previusProps before doing some update, also note that; if setUser gets dispatched with new data, you need to update the prevUsername ref/variable. You can do that like this:

setUser((prevUser)=>{ 
 //here you get the previous user before updating
 prevUsername.current = prevUser.name;
 })

CodePudding user response：

If I correctly understood you basically want to copy user.name prop to some variable such that future updates to props.user.name are ignored by that variable. In such case you must copy that props to a state variable:

 // inside Edit   
 const [previousName, setPreviousName] = useState(props.user.name);

This way previousName will get initialized with props.user.name when that component mounts for the first time. Further updates to props.user.name will be ignored by this state variable.

Only if you unmount the Edit component and mount again, then it will copy the props.user.name again into previousName.

PS Alternatively you can use useRef instead of useState in my example