React Hooks - set state to initial state - reactjs

Question

I am using React useState to create an object in state.
This is updated to an object of data after a successful API call.
I have a form that can change this state, but I also have a cancel button.
How can i restore this state to its initial values (after API call) when cancel is clicked?
Should i create another state variable and store initial state there and then update my state based on that?
const [basePosition, setBasePosition] = useState({});
const [position, setPosition] = useState({
id: '',
title: '',
description: '',
authoredBy: '',
createdDate: '',
lastUpdatedBy: '',
lastUpdateDate: '',
sliderResponses: [],
tileResponses: [{}],
template: {}
});```

Answer 1

const initialState = {
id: '',
title: '',
};
const Test = () => {
const [position, setPosition] = useState(initialState);
return <>
...form
<button onClick={() => setPosition(initialState)}>Reset</button>
</>;
};

Answer 2

Don't create another state variable just to store initial state as it will cause another re render instead when your component is mounted then intialize your initial state object:
let initialState = null;
React.useEffect(() => {
initialState = position;
},[])
When you want to reset to initial state just use:
setPosition(initialState);

Answer 3

You need not to create another State. Just declare an initial state which will not be changed and assign it to the Position state when it is needed to be reset. EX:
import React,{useState} from 'react'
const YourComponent = () =>{
const initialState = {
id: '',
title: '',
description: '',
authoredBy: '',
createdDate: '',
lastUpdatedBy: '',
lastUpdateDate: '',
sliderResponses: [],
tileResponses: [{}],
template: {}
}
const [basePosition, setBasePosition] = useState({});
const [position, setPosition] = useState(initialState);
const resetState = () =>{
setPosition(initialState)
}
}

Answer 4

Answer to your question if you should store initial value is Yes.
That would be the easiest way to maintain your code. So put your initial value in a constant:
const INITIAL_VALUES = {
id: '',
title: '',
description: '',
authoredBy: '',
createdDate: '',
lastUpdatedBy: '',
lastUpdateDate: '',
sliderResponses: [],
tileResponses: [{}],
template: {}
}
Than every time you want to use that initial object, just spread it and all is good (spread to lose reference to constant):
const [basePosition, setBasePosition] = useState({});
const [position, setPosition] = useState({...INITIAL_VALUES});
And later when you reset:
setPosition({...INITIAL_VALUES})

Answer 5

import React, { useState } from 'react'
// counter
function Example3() {
const [initial, setIncrement] = useState(0)
const increment = () => {
setIncrement(initial + 1)
}
const dincrement = () => {
setIncrement(initial - 1)
}
const reset = () => {
setIncrement(0)
}
return (
<div>
<p>{initial}</p>
<button onClick={increment} >+</button>
<button onClick={dincrement} >-</button>
<button onClick={reset}>reset</button>
</div>
)
}
export default Example3;