React Hooks[useState()] - setState has become easier

React has come out with hooks while ago, but it is still not that common to use hooks even though it helps a lot with program performance. I have already written about useEffect() in a different post

I personally find hooks a lot easier. useEffect() is a lot easier to use than componentDidUpdate(). I faced so many infinite loops while trying to use componentDidUpdate(), so ended up using different lifecycle methods such as getDerivedStateFromProps

When you change a state in a react component, you have to setState like below;

increasePrice = () => {
  this.setState({
    priceChange: !this.state.priceChange,
    price: this.state.price + 2000,
  });
};

By chaning the state of price, I was trying to update the total price that appears in a component.

If I were to use useState() instead, I can change the above method/function like below

const [priceChange, setPriceChange] = useState(true);
const [price, setPrice] = useState(0);

increasePrice = () => {
  setPrieChange(!priceChange);
  setPrice(price + 2000);
};

The value inside useState(value) represents the intial value of the state. By using useState, there is no need for destructuring, and the code itself becomes a lot more straight-forward. The downside is that if you have a lot of states to manage within a single component, you have to declare all of them like I did in the second example.

React Hooks allows you to write your React project as a function rather than a class, which could increase the performance exponentially especially if your project is huge. I have actually did the entire project with function components without having to use class.