DEV Community: Javanshir Abdullayev

Understanding React: The Difference Between Controlled and Uncontrolled Components

Javanshir Abdullayev — Fri, 24 Feb 2023 07:49:42 +0000

Introduction

Hey there! When building React applications, there are two ways to manage the state of your components: controlled and uncontrolled components. Each approach has its own advantages and disadvantages. By understanding their differences, you can choose the right one for your project. Keep up the great work! 😊

Controlled Components

A controlled component is a React component that gets its value from props and notifies changes through callbacks like onChange. In other words, its value is controlled by a parent component. This can be really useful when you need to manage the state of your component from a parent component, such as a form.

Let's take an example. Say you have a form with an input field. You can create a controlled component by passing a value and an onChange callback as props. The value will be the value of the input field, and the onChange callback will be called every time the user types something in the input field. The parent component can then update the value of the input field by updating the props passed to the controlled component.

The main advantage of controlled components is that the parent component has full control over the state of the component. This makes it easier to implement complex features like validation or logic that depends on the state of multiple components. However, controlled components require more code to set up and maintain.

Here's an example of a controlled component in React:

import React, { useState } from 'react';

function ControlledComponent() {
  const [value, setValue] = useState('');

  function handleChange(event) {
    setValue(event.target.value);
  }

  function handleSubmit(event) {
    event.preventDefault();
    console.log('Submitted value:', value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Controlled Input:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

In this example, we have a controlled component called ControlledComponent that includes a form with a single text input. The value of this input is stored in the component's state using the useState hook.

We also have two functions: handleChange and handleSubmit. The handleChange function updates the component's state with the current value of the input, and the handleSubmit function logs the submitted value to the console.

Finally, the input element is a controlled component because its value is bound to the value state variable using the value prop. When the user types something into the input, the handleChange function is called, which updates the value state variable and causes the input to re-render with the new value.

By using a controlled component, we have complete control over the state of the input and can perform validation or manipulation of the data before submitting it to the server.

Uncontrolled Components

An uncontrolled component refers to a React component that manages its own state internally via refs or other techniques. This means that its value is not under the control of a parent component. Typically, an uncontrolled component comes in handy when you need to manage the state of your component internally, such as a simple input field.

For example, if you have a simple input field that doesn't require any validation or logic, you can create an uncontrolled component using refs to get the value of the input field. The component can then manage its own state internally without requiring any props or callbacks from a parent component.

The main benefit of using uncontrolled components is that they require less code to set up and maintain. This makes them an ideal choice for simple components that don't require complex state management. However, it's worth noting that uncontrolled components can be harder to debug and test, especially if they rely on internal state.

Here's an example of an uncontrolled component in React:

import React from 'react';

function UncontrolledComponent() {
  function handleSubmit(event) {
    event.preventDefault();
    console.log('Submitted value:', event.target.text.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Uncontrolled Input:
        <input type="text" name="text" />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

In this example, we have an uncontrolled component called UncontrolledComponent that includes a form with a single text input. Unlike the controlled component example, the value of this input is not stored in the component's state.

Instead, when the form is submitted, we access the value of the input directly from the event object using event.target.text.value. This means that the value of the input is not controlled by React and can potentially be modified by the user outside of React's control.

Uncontrolled components are useful when you don't need to perform any validation or manipulation of the data before submitting it to the server. They can also be more performant than controlled components because React doesn't have to re-render the component every time the user types something into the input.

However, they do have some limitations, such as limited control over the input value and potential for inconsistent behavior across different browsers or devices.

Choosing Between Controlled and Uncontrolled Components

Choosing between controlled and uncontrolled components depends on the specific requirements of your project. Here are some factors to consider:

Complexity: If you need to implement complex features like validation or logic that depends on the state of multiple components, controlled components are a better choice because they give the parent component full control over the state of the component.
Simplicity: If you are building a simple component that doesn't require complex state management, uncontrolled components can be a good choice because they require less code to set up and maintain.
Performance: Controlled components can be slower than uncontrolled components because they require more rendering cycles. However, in most cases, the performance difference is negligible.
Debugging and Testing: Debugging and testing controlled components is easier than uncontrolled components because the state is managed by the parent component. However, if you are building a simple component that doesn't require complex state management, debugging and testing an uncontrolled component is relatively straightforward.

Conclusion

In summary, controlled and uncontrolled components are two different approaches to managing the state of React components. Controlled components are useful when you need to manage the state of a component from a parent component, while uncontrolled components are useful when you need to manage the state of a component internally. Both approaches have their own benefits and drawbacks, and choosing the right one depends on the specific requirements of your project. By understanding the differences between these two approaches, you can make an informed decision about which one to use in your React applications. Hope this helps! Let me know if you have any other questions. :)

Additional Resources

Functional Programming Techniques in JavaScript: An Introduction for Beginners

Javanshir Abdullayev — Mon, 06 Feb 2023 08:56:11 +0000

Understanding the Concepts and Principles of Functional Programming

Functional programming is a programming paradigm that emphasizes the use of functions as first-class citizens, immutability, and avoiding side effects. It's a paradigm that has been gaining a lot of popularity in recent years due to its ability to simplify code and make it more readable, maintainable, and scalable.

The core concepts of functional programming are functions, immutability, and pure functions. Functions are the building blocks of functional programming and are treated as first-class citizens. This means that functions can be passed as arguments, returned as values, and assigned to variables. Immutability refers to the concept of data that can never change after it has been created. This is achieved by not mutating the data and instead returning new data when changes are needed. Pure functions are functions that always produce the same result given the same inputs and do not have any side effects.

In JavaScript, we can implement these concepts using techniques such as higher order functions, currying, and closure. Higher order functions are functions that take other functions as arguments or return functions as results. This enables us to create reusable functions that can be combined to create more complex functions. Currying is a technique that allows us to transform a function with multiple arguments into a series of functions with a single argument. Closure is a feature in JavaScript that allows a function to remember the variables in its scope even after the function has returned.

Here's a simple example of how we can implement these concepts in JavaScript:

javascriptCopy code
const add = (a, b) => a + b;
const addFive = add.bind(null, 5);

console.log(addFive(3)); // 8

In this example, we have a function add that takes two arguments and returns their sum. We then use bind to create a new function addFive that is a partially applied version of add with 5 as the first argument. This allows us to reuse the add function and easily create new functions with different values as the first argument.

Implementing Higher Order Functions in JavaScript

Higher Order Functions (HOFs) are a key concept in functional programming that enables us to pass functions as arguments, return functions as values, and assign functions to variables. HOFs allow us to create reusable functions that can be combined to create more complex functions. This leads to code that is more readable, maintainable, and scalable.

In JavaScript, functions are first-class citizens, which means they can be treated as any other data type, such as numbers, strings, and objects. This makes it easy to implement HOFs in JavaScript.

Here's a simple example of how we can implement a HOF in JavaScript:

const add = (a, b) => a + b;
const multiply = (a, b) => a * b;

const calculate = (fn, a, b) => fn(a, b);

console.log(calculate(add, 2, 3)); // 5
console.log(calculate(multiply, 2, 3)); // 6

In this example, we have two functions add and multiply that perform simple arithmetic operations. We then have a calculate function that takes a function fn as an argument, along with a and b. The calculate function then calls fn with a and b as arguments and returns the result. This allows us to pass different functions to the calculate function and perform different arithmetic operations.

HOFs can also be used to create more complex functions through composition. For example:

const add = (a, b) => a + b;
const multiply = (a, b) => a * b;

const addAndMultiply = (a, b) => multiply(add(a, b), b);

console.log(addAndMultiply(2, 3)); // 15

In this example, we have created a addAndMultiply function that takes a and b as arguments and returns the result of adding a and b and then multiplying the result by b. This demonstrates how we can use HOFs to create more complex functions by composing simple functions.

In conclusion, implementing HOFs in JavaScript can greatly improve the quality of your code by making it more readable, maintainable, and scalable. By embracing HOFs, you can write code that is more expressive, concise, and easier to understand.

Using Pure Functions to Write Predictable and Maintainable Code

Pure functions are an important concept in functional programming that have a number of benefits for writing predictable and maintainable code. A pure function is a function that always returns the same result given the same inputs, and does not have any side effects. In other words, a pure function does not modify any external state and only depends on its inputs.

Here's an example of a pure function in JavaScript:


const add = (a, b) => a + b;

console.log(add(2, 3)); // 5
console.log(add(2, 3)); // 5

In this example, the add function takes two arguments a and b and returns their sum. The function is pure because it always returns the same result given the same inputs, and does not have any side effects.

The benefits of using pure functions are numerous. For example:

They are easier to test, as you only need to check the output for a given set of inputs.
They are easier to understand, as their behavior is predictable and does not depend on external state.
They are easier to maintain, as they do not modify external state and are isolated from changes in the rest of the code.

Using pure functions in your code can greatly improve the quality of your code by making it more predictable and maintainable. This can lead to fewer bugs, faster development, and better overall performance.

In conclusion, by embracing pure functions in your code, you can write more predictable, maintainable, and scalable code that is easier to test, understand, and maintain.

The Advantages of Immutable Data Structures in JavaScript

Immutable data structures are a key concept in functional programming that offer a number of advantages for writing scalable and maintainable code. An immutable data structure is a data structure that cannot be modified once it is created. Instead, when we want to update an immutable data structure, we create a new one based on the original.

Here's an example of how we can create an immutable data structure in JavaScript using the Object.freeze method:


const person = Object.freeze({
  name: 'John Doe',
  age: 30
});

console.log(person.name); // 'John Doe'

// This will throw an error, as person is an immutable data structure
person.name = 'Jane Doe';

The advantages of using immutable data structures in your code are numerous. For example:

They make it easier to reason about your code, as their state cannot be modified unexpectedly.
They are thread-safe, as multiple threads cannot modify the same data structure at the same time.
They allow for easier debugging, as you can track changes to data over time by comparing the original data structure with new ones.

In conclusion, by embracing immutable data structures in your code, you can write more predictable, maintainable, and scalable code that is easier to reason about and debug. This can lead to fewer bugs, faster development, and better overall performance.