Best Way To Update / Change State Object In React Native?

What's the best way to update a nested property deep inside the State object? // constructor -- this.state.someprop = [{quadrangle: {rectangle: {width: * }}, ...}] ... I want to u

Solution 1:

// ES6 WAYS TO UPDATE STATE
// NOTE: you MUST use this.setState() function for updates to your state 
class Example extends Component {

constructor(props) {
 super(props);
 this.state =  {
  name: 'John',
  details: {
    age: 28,
    height: 1.79,
  }
 }

componentDidMount() {
 this.handleChangeName('Snow');
 this.handleAgeChange(30);
}

componentDidUpdate() {
 console.log(this.state);
 /*
 returns 
 {
  name: 'Snow',
  details: {
    age: 30,
    height: 1.79,
  }
 }
 */
}

// this way you keep your previous state immutable (best practice) with 
// param "prevState"
handleChangeName = (_name) => {
 this.setState(
  (prevState) => ({
    name: _name
  })
 )
}

//this is how you update just one property from an internal object
handleAgeChange = (_age) => {
 this.setState(
  (prevState) => ({
    details: Object.assign({}, prevState.details, {
     age: _age
    })
  })
 )
}

// this is the simplest way to set state
handleSimpleAgeChange = (_age) => {
  this.setState({
    details: Object.assign({}, this.state.details, { age: _age })
  })
}

render() {
 return (
   <h1>My name is {this.state.name} and I'm {this.state.details.age} years old</h1>
 )
}

}

If you want to keep the best practice without making it harder, you can do:

updateState = (obj) => {
 if (obj instance of Object) {
  this.setState(
   (prevState) => (Object.assign({}, prevState, obj))
  );
 }
}

usage:

//code ... code ... code ...

handleAgeChange = (_age) => {
 this.updateState({
  details: Object.assign({}, this.state.details, { age: _age }
 })
}

Solution 2:

The best way, and the way facebook has proposed, is to use this.setState({someProp: "your new prop"}).

Using it is the only way which is going to guarantee that the component will be rendered correctly.

This function is incremental, so you dont need to set the whole state, just the prop you need.

I strongly recomend you to read the docs here.

Solution 3:

If your object is nested make the inner object it's own state,

this.state = {
  quadrangle: {this.state.rectangle, ...}
  rectangle: {width: * }}
};

then use your clone and replace technique:

const {rectangleNew} = this.state.rectangle;
rectangleNew.width = newvalue;
this.setState({rectangle: rectangleNew});

The state should propagate upwards. Should improve performance if only certain quadrangles need to be updated based on said rectangle. Props down, state up.

Solution 4:

with hooks use this way - setBorder((pre) => { return ({ ...pre, border_3: 2 }) })

• example :

// state for image selected [ borderd ]

const [bordered, setBorder] = useState({ border_1: 0, border_2: 0, border_3: 0, border_4: 0, border_5: 0, border_6: 0, border_7: 0, border_8: 0 });
// pre is previous state value 


const handle_chose = (y) => {
        
//generate Dynamic Key 
var key = "border_" + y;

 
setBorder((pre) => { return ({ ...pre, [key]: 2 }) })

 }