Question 228670 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Difference between useState and props

I am new to React and I am trying to understand the difference between the following two approaches in a simple example where the button color is changed when there is a mouse hover event.

First approach using props:

  function over(props) {
    props.target.style.backgroundColor = 'black';
  };

  function out(props){
    props.target.style.backgroundColor = 'white';
  };

  return (
    <div className="container">
      <h1>{headingText}</h1>
      <input type="text" placeholder="What's your name?" />
      <button onMouseOver={over} onMouseOut={out}>Submit</button>
    </div>
  );

Second approach using useState:

  const [isMouseOver, setMouseOver] = useState(false);
 

  function handleMouseOver() {
    setMouseOver(true);
  };

  function handleMouseOut() {
    setMouseOver(false);
  };
  
  return (
    <div className="container">
      <h1>{headingText}</h1>
      <input type="text" placeholder="What's your name?" />
      <button
        onMouseOver={handleMouseOver}
        onMouseOut={handleMouseOut}
        style={{ backgroundColor: isMouseOver ? "black" : "white"}}
      >
        Submit
      </button>
    </div>
  );

I can see the same behavior is accomplished, but I would like to understand if technically there is any difference between these two, and if they are both valid or perhaps the first one should not be used?

Thanks in advance.

Tags:

2

Answers


  1. 0

    1. State and UI Update:
      When you want to update something on the UI based on changes in data (like a counter increment), React provides a mechanism to manage and track such changes. React components can have their own internal state which holds data that can influence the rendering of the component.

    2. useState Hook:
      The useState hook is a feature in React that lets you add state to your functional components. It provides a way to declare a piece of state in your component along with a function to update that state.

      const [counter, setCounter] = useState(0);

      In this example, counter is the state value, and setCounter is the function you use to update counter.

    3. Updating State and Triggering UI Updates:
      When you want to update the state, you use the provided state update function (setCounter in this case). React’s useState and other state management hooks are built in a way that when you call the update function, React knows that the state has changed and will trigger a re-render of the component.

      const handleIncrement = () => {
  setCounter(prevCounter => prevCounter + 1);
};

      This function takes the previous state (prevCounter) as an argument and returns the new state value (previous value + 1).

    4. Using State in UI:
      Once you’ve updated the state using setCounter (or other similar state update functions), React will automatically re-render the component, and any parts of the UI that depend on the state (in this case, the value of counter) will be updated accordingly.

    So, your recommendation of using the useState hook to manage state and trigger UI updates is indeed a widely accepted and modern approach in React development.

    Login or Signup to reply.
  2. 0

    The first approach is just using regular functions, with arguments (not to be confused with props, which is the argument to a component’s render function).

    The second approach gives you access to the logical state of your component, and renders the view from that. Interaction lead to changing that internal state, and then re-rendering what needs to be re-rendered. The state of your component can be local, or be a view/lens of a global state.

    The first approach doesn’t give you access to the logical state of your component. That state has to be deduced by reading it, at a local level. You can’t have access to said state anywhere without propagating back up yourself. It also leaves you with the hard task of intelligently managing DOM state updates.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search