How to merge multiple functions into one function

Question

I was wondering if I can optimaze the follwoing functions into one or two functions instead of four. Here is the link to the code

  // Proceed to next step
  const firstStep = (firstName, lastName) => {
    setInputValue((prevState) => ({
      ...prevState,
      step: prevState.step + 1,
      firstName: firstName,
      lastName: lastName,
    }));
  };
  // Proceed to next step
  const secondStep = (email, password) => {
    setInputValue((prevState) => ({
      ...prevState,
      step: prevState.step + 1,
      email: email,
      password: password,
    }));
  };

  const thirdStep = () => {
    setInputValue((prevState) => ({
      ...prevState,
      step: prevState.step + 1,
    }));
  };

  const fourthStep = () => {
    setInputValue((prevState) => ({
      ...prevState,
      step: prevState.step + 2,
    }));
  };

What do you hope to achieve by merging these functions? They all appear to do slightly different things. Is it a typo for the fourthStep function to add 2 to the step? — Drew Reese
– Drew Reese, Commented Sep 11, 2020 at 7:02
@DrewReese the fourth one is not a typo. You are right. All of these functions do slightly different things. I was thinking that I am doing something wrong if I repeat the functions with a small difference in what they achieve — John John
– John John, Commented Sep 11, 2020 at 7:06
Well, if the goal is to be more DRY then you can identify what is "abstractly" the same functionality, like incrementing the step by some amount, and updating some state. I think @CertainPerformance is onto it. — Drew Reese
– Drew Reese, Commented Sep 11, 2020 at 7:09

CertainPerformance · Accepted Answer · 2020-09-11 07:02:59Z

One approach is to make a function which, given a step increment count and a new object to merge with the existing state, calls setInputValue with the required combined object:

const setStep = (newProps, stepIncrement) => {
  setInputValue((prevState) => ({
    ...prevState,
    ...newProps,
    step: prevState.step + stepIncrement,
  }));
};

Then instead of firstStep(firstName, lastName), you can do setStep({ firstName, lastName }, 1), and so on.

Since you're using hooks, another option would be to use separate state variables and functions:

const [step, setStep] = useState(1);
const [firstName, setFirstName] = useState('');
// etc

const firstStep = (firstName, lastName) => {
  setFirstName(firstName);
  setLastName(lastName);
  setStep(step + 1);
};
const secondStep = (email, password) => {
  setEmail(email);
  setPassword(password);
  setStep(step + 1);
};
const thirdStep = () => setStep(step + 1);
const fourthStep = () => setStep(step + 2);

Cuong DaoVan · Accepted Answer · 2020-09-11 07:10:44Z

0

from my view

const step = ({ firstName = "", lastName = "", email = "", password = "", step = 0 }) => {
  setInputValue(prevState => ({
    ...prevState,
    step: prevState.step + step,
    firstName: firstName || prevState.lastName,
    lastName: lastName || prevState.lastName,
    email: email || prevState.email,
    password: password || prevState.password
  }));
};

answered Sep 11, 2020 at 7:10

Cuong DaoVan

3422 silver badges7 bronze badges

Comments

Sohaib Shabbir بٹ · Accepted Answer · 2020-09-11 07:46:15Z

0

Here is something that I tried to resolve your dilemma.

const nextStep = (newValues, incrementCount) => {
setInputValue((prevState) => ({
  ...prevState,
  ...newValues,
  step: prevState.step + (incrementCount ? incrementCount : 1)
}));
};

You can see full code here.

answered Sep 11, 2020 at 7:46

Sohaib Shabbir بٹ

1192 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to merge multiple functions into one function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related