Dev Talks By Khan

State Management with Currying in React.js

Babajan Khan's photo
Babajan Khan
·

3 min read

State Management with Currying in React.js

Table of contents

Introduction:

Currying is a powerful technique that simplifies state management and promotes code reuse. Let’s explore how currying works and see an example of its implementation in a React component.

Currying in JavaScript:

Currying is a concept in functional programming where a function with multiple arguments is transformed into a sequence of functions, each taking a single argument. This enables us to create specialized versions of the original function by partially applying arguments upfront.

const curryingFunction = (a) => (b) =>(c) => a + b + c;

curryingFunction(1); // b => c => 1 + b + c
curryingFunction(1)(2) // c => 1 + 2 + c => 3 + c
curryingFunction(1)(2)(3) // 1 + 2 + 3 => 6

Without Currying :

Let's take a simple form in Registration Form in React

function RegisterComponent() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');

  const handleNameChange  = (event) => {
    setName(event.target.value);
  };
  const handleEmailChange  = (event) => {
    setEmail(event.target.value);
  };
  const handlePhoneNoChange  = (event) => {
    setPhone(event.target.value);
  };

  return
    <>
      <input 
        value={name} 
        onChange={handleNameChange} />
      <input 
        value={email} 
        onChange={handleEmailChange} />
      <input 
        value={phone} 
        onChange={handlePhoneNoChange}/>
    </>;
}

With Currying :

function RegisterComponent() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');

  const handleChange = (setState) => (event) => {
    setState(event.target.value);
  };

  return
    <>
      <input 
        value={name} 
        onChange={handleChange(setName)} />
      <input 
        value={email} 
        onChange={handleChange(setEmail)} />
      <input 
        value={phone} 
        onChange={handleChange(setPhone
)}/>
    </>;
}

Simplifying State Management in React:

In the provided code snippet, we can see how currying is utilized to simplify state management in a React component. Here’s a breakdown of the code:

  • The useState hook is used to declare three separate state variables: name, email, and phone.

  • The handleChange function is defined as a curried function. It takes a setState function as an argument and returns another function that handles the onChange event.

  • Inside the handleChange function, the returned event handler receives the event object and calls the setState function with the value of the input element.

  • The handleChange function is then invoked for each input field, passing the respective setState function as an argument. This creates a specialized version of the event handler for each input field, encapsulating the corresponding state update logic.

Benefits of Currying:

By using currying in this example, we achieve several benefits:

  • Code reusability: The handleChange function can be reused for any input field with minimal modifications.

  • Conciseness: The code is significantly reduced by eliminating redundant event handler functions for each input field.

  • Maintainability: Modifications or enhancements to the state management logic can be made in a single place, improving code maintainability.

  • Readability: Currying makes the code more readable by clearly separating the state update logic for each input field.

Conclusion :

Currying is a valuable technique in React.js that simplifies state management, promotes code reuse, and enhances code readability. By utilizing currying, we can reduce code duplication and create more maintainable components. Give it a try in your next React project and experience the benefits firsthand!

ReactJavaScript