React refactor code #2

#javascript #webdev #beginners #react

Actual code :

const Counter = ({}) => {
  const [counter, setCounter] = useState(0)

  const reset = () => setCounter(0)

  return (
    <div>
      <p>{counter}</p>
      <button onClick={() => setCounter(counter + 1)}>+</button>
      <button onClick={() => setCounter(counter - 1)}>-</button>
      <button onClick={() => reset()}>Reset</button>
    </div>
  )
}

Refactor stage 1 :
instead of setCounter(counter + 1) if we use increment() it would be more readable.

const Counter = ({}) => {
  const [counter, setCounter] = useState(0);

  const reset = () => setCounter(0);

  const increment = () => setCounter(counter + 1);

  const decrement = () => setCounter(counter - 1);

  return (
    <div>
      <p>{counter}</p>
      <button onClick={() => increment()}>+</button>
      <button onClick={() => decrement()}>-</button>
      <button onClick={() => reset()}>Reset</button>
    </div>
  );
};

Refactor stage 2 :
No inline functions

const Counter = ({}) => {
  const [counter, setCounter] = useState(0);

  const reset = () => setCounter(0);

  const increment = () => setCounter(counter + 1);

  const decrement = () => setCounter(counter - 1);

  return (
    <div>
      <p>{counter}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

DEV Community

React refactor code #2

Top comments (0)

Read next

Introduction to Jest: Unit Testing, Mocking, and Asynchronous Code

5 Essential Tips for AWS Beginners: What I Wish I’d Known Starting Out with Cloud Computing

How to use Cookie Consent in a React App with react-cookie-consent

String - JavaScript Challenges