DEV Community: Buket [/boʊˈkeɪ/]

Demystifying React useState Hook: Simplifying State Management in Functional Components

Buket [/boʊˈkeɪ/] — Thu, 29 Jun 2023 22:07:16 +0000

React is a the popular JavaScript library for building user interfaces and it mostly revolves around the concept of state. State allows components to store and manage data, enabling dynamic and interactive behavior.

In this article, I will dive deep into one of React's fundamental features - the useState hook to explore its purpose, usage, and benefits. I am hoping to provide beginners with a comprehensive understanding of how to leverage useState effectively in their React applications.

What is useState?
The useState hook is a built-in React feature that simplifies state management in functional components. It removes the need for class components or complex lifecycle methods, making it easier to declare and update state variables. By using the useState hook, developers can easily declare and update state variables, making the process more straightforward and concise.

The syntax of the useState hook in React is as follows:


const [stateValue, setState] = useState(initialValue);

Let's break down the syntax:

stateValue: This is the state variable that holds the current value of the state.

setState: This is the state update function that is used to modify the state value. It is responsible for updating the state and triggering a re-render of the component.

useState(initialValue): This is the hook itself, where initialValue is the initial value assigned to the state variable. The useState hook returns an array with two elements: the current state value (stateValue) and the state update function (setState).

To use useState, simply import it from the 'react' package.

import React, { useState } from 'react';

Here's an example of how to use the useState hook with the syntax in a component:

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(initialValue);

  // Rest of the component code

  return (
    // JSX code
  );
};

export default MyComponent;

Let's explore an example of how to incorporate state into a component using the useState hook:

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleCount}>Increment</button>
    </div>
  );
};

export default MyComponent;

In the above example, we start by importing the useState hook from the 'react' package. Within the functional component 'MyComponent', we declare a state variable called 'count' and its corresponding updater function, 'setCount'. The initial value of 'count' is set to 0 using the useState hook. We can then access the 'count' variable in our component and modify it using the 'setCount' function.

Let me explain useState hook with a metaphor.

Imagine we're cooking a soup and we use the stateValue to keep track of its taste. If the stateValue is initially set to 'very salty', then the setState can be seen as the action of adjusting the soup by adding more water and vegetables. This action triggers us to re-evaluate (re-render) the soup, and we realize that the soup is now 'a little salty'. The initial value 'very salty' is updated to the new current value 'a little salty' through the setState function.

In this metaphor, the stateValue represents the current taste of the soup, and the setState function allows us to modify and update the taste based on our actions or changes in the environment.

Updating State with useState:
The useState hook simplifies the process of updating state. When the state update function (e.g., setCount) is called, React re-renders the component, reflecting the new state value.

It's important to note that when updating state, it's crucial to provide the new complete state value instead of relying on the previous state.

const incrementCount = () => {
  setCount(count + 1);
};

In the above example, the 'incrementCount' function is triggered when the button is clicked. It uses the 'setCount' function to increment the 'count' state by 1. React automatically handles the state update and re-renders the component with the updated value.

Benefits of useState:
The useState hook offers several advantages for React development:

Streamlined Syntax: By eliminating the need for class components and complex lifecycle methods, useState simplifies state management, resulting in cleaner and more concise code.
Functional Components: With useState, you can use functional components instead of class components, promoting modularity and reusability.
Multiple State Variables: useState can be used multiple times within a component, allowing you to manage multiple state variables independently.
Enhanced Performance: React optimizes state updates with useState, minimizing unnecessary re-renders and improving overall application performance.

Let's make more example:

Toggling a Boolean State Example

import React, { useState } from 'react';

const ToggleButton = () => {
  const [isOn, setIsOn] = useState(false);

  const toggle = () => {
    setIsOn(!isOn);
  };

  return (
    <div>
      <button onClick={toggle}>{isOn ? 'ON' : 'OFF'}</button>
    </div>
  );
};

export default ToggleButton;

In this example, first, I import the necessary dependencies, including the useState hook from React. I used useState to manage a boolean state variable called isOn. The initial value is set to false. When the button is clicked, the toggle function is executed, which updates the state using the setIsOn function. The button's text dynamically changes based on the current state.

Managing an Array State Example

import React, { useState } from 'react';

const TodoList = () => {
  const [todos, setTodos] = useState([]);

  const addTodo = () => {
    const newTodo = prompt('Enter a new todo:');
    setTodos([...todos, newTodo]);
  };

  return (
    <div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <button onClick={addTodo}>Add Todo</button>
    </div>
  );
};

export default TodoList;

This example has a functional component called TodoList that manages an array state named todos using the useState hook. The initial value of todos is set to an empty array [].

The addTodo function is triggered when the user clicks the "Add Todo" button. It prompts the user to enter a new todo item using the prompt function. The entered todo item is stored in the newTodo variable.

To add the new todo to the existing array of todos,I use the setTodos function and pass in a new array created using the spread operator ([...todos]). This ensures that I create a new array rather than modifying the original state directly. I then append the newTodo to the new array.

In the JSX portion of the component, I render the list of todos dynamically using the .map() function. For each todo item in the todos array, I generate a list item (

) with a unique key attribute set to the index of the todo. This helps React efficiently update and reconcile the list items when the state changes.

Finally, I render an "Add Todo" button that triggers the addTodo function when clicked.

Conclusion:

The useState hook is a powerful tool for managing state within functional components in React.

By simplifying the process of adding and updating state, it enables beginners to grasp and utilize state management effectively. Leveraging useState empowers developers to build dynamic and interactive React applications with ease.

To use useState effectively, remember to import it from the 'react' package, declare your state variables, and use the corresponding state update functions to modify state values. Embrace the benefits of useState in your React projects and unlock the full potential of state management in your applications.

Let me finish my article with one last example to polish what we have learned.

Tracking Input Field Value Example

import React, { useState } from 'react';

const InputField = () => {
  const [inputValue, setInputValue] = useState('');

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

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>Input Value: {inputValue}</p>
    </div>
  );
};

export default InputField;

In this last example, I'm using React to create an input field component.

Inside the component function, I declare a state variable called "inputValue" using the useState hook. It's initially set to an empty string (''). This variable will hold the current value of the input field.

Next, I define a function called "handleChange" that gets triggered whenever there is a change in the input field. It takes an "event" object as a parameter. Inside the function, I update the "inputValue" state by calling the "setInputValue" function and passing the new value from the event's target (the input field).

In the return statement, I render a

that contains an element. The value of the input field is set to the "inputValue" state, which means it will display the current value. Whenever there is a change in the input field, the "handleChange" function is called.

Additionally, I render a

element that displays the current value of the input field using curly braces and the "inputValue" variable.

Finally, I export the "InputField" component so it can be used in other parts of the application.

Overall, this code sets up an input field that allows me to type and see the value I entered. The "useState" hook helps me manage the state of the input field, and the "handleChange" function updates the state whenever there is a change in the input field.

Happy Coding!
Bouquet

Resources:

Getting Started | Create React App

Create React App is an officially supported way to create single-page React

create-react-app.dev

Create React App

Set up a modern web app by running one command.

create-react-app.dev

Array method .reduce()

Buket [/boʊˈkeɪ/] — Fri, 05 May 2023 04:02:49 +0000

In this post, I would like to explain how the reduce() method works and how we can use it.

In JavaScript, the reduce() method is a built-in function of the Array object that applies a function to the elements of an array cumulatively, until it gets a single value.

If you need to reduce a list to a single value, reduce() method will be your best friend because it is a great tool to create a single summary value, such as calculating the total price of a shopping cart.

Let's examine it with an example.

const items = [
    {
        name: 'Amazon Fresh Bagels',
        price: 3.99,
        amount: 1
    },
    {
        name: 'Amazon Fresh Cream Cheese',
        price: 2.70,
        amount: 1
    },
    {
        name: 'Amazon Fresh Ground Turkey',
        price: 5.99,
        amount: 1
    },
    {
        name: 'Amazon Fresh Whole Milk, 1 Gallon',
        price: 2.99,
        amount: 1
    }
]

We can reduce array of items into a single value: the total price. Our function ShoppingCardTotal() will look like this:

function shoppingCardTotal(items) {
    let totalPrice = 0;

    for (const item of items) {
        totalPrice += item.price;
    };

    return totalPrice;
}

console.log(shoppingCardTotal(items));
  // LOG = 15.67

What happened here in our code?
We have an array of objects called items that represents a shopping cart with a list of products; each has a name, price, and amount.
The shoppingCardTotal() function takes the items array as an argument and calculates the total price of the items in the shopping cart using a for loop. Let's analyze our function in more detail:

function shoppingCardTotal(items) {
    let totalPrice = 0;

    for (const item of items) {
        totalPrice += item.price;
    };

    return totalPrice;
}

First, our function initializes the totalPrice variable to 0.

The totalPrice variable is set (initialized) to 0 to start with an empty sum because this variable serves as an accumulator to keep track of the cumulative sum of the prices as the shoppingCardTotal() function loops through each item in the items array. By starting with an empty sum, the totalPrice variable can be incremented with the price of each item in the items array, resulting in an accurate calculation of the total price.

Then, it loops through each item object in the items array using a for...of loop[1].
On each iteration of the loop, it adds the price property of the current item to the totalPrice variable using the += operator.

Finally, it returns the totalPrice variable, which represents the total cost of all the items in the shopping cart.

Let's change the amount of some items.

const items = [
    {
        name: 'Amazon Fresh Bagels',
        price: 3.99,
        amount: 1
    },
    {
        name: 'Amazon Fresh Cream Cheese',
        price: 2.70,
        amount: 2
    },
    {
        name: 'Amazon Fresh Ground Turkey',
        price: 5.99,
        amount: 3
    },
    {
        name: 'Amazon Fresh Whole Milk, 1 Gallon',
        price: 2.99,
        amount: 1
    }
];

We need to update our function, shoppingCardTotal(), accordingly.

function shoppingCardTotal(items) {
    let totalPrice = 0;

    for (const item of items) {
        totalPrice += item.price * item.amount;
    };

    return totalPrice;
}

console.log(shoppingCardTotal(items));
  // LOG = 30.35

In our updated function, the totalPrice variable is still initialized to 0. However, instead of simply adding the price of each item to the totalPrice, we multiply the price by the amount of each item before adding it to the totalPrice. By doing this, we ensure that the total price of the shopping cart includes the quantity of each product.

So far, we wrote a basic function in which we manually added the prices together to get the logic of how .reduce() works. A more abstract and reusable solution can be achieved by creating a generalized function that takes two additional parameters other then our array items: an initial value and a callback function.

function shoppingCardTotal(items, multiplyAndSum, init) {
    let totalPrice = init;

    for (const item of items) {
        totalPrice = multiplyAndSum(totalPrice, item);
    };

    return totalPrice;
}

function multiplyAndSum(total, item) {
    return total + (item.price * item.amount);
}

console.log(shoppingCardTotal(items, multiplyAndSum, 0));
  // LOG = 30.35

Our updated function takes three parameters: the shopping cart items, an initial value (init) for the total price calculation, and a callback function multiplyAndSum to calculate the total price. We initialize totalPrice to the init value, loop through each item and update the totalPrice using the callback function. The function returns the final totalPrice value as the total price of all the items in the shopping cart.

function shoppingCardTotal(items, multiplyAndSum, init) {
    return items.reduce((total, item) => multiplyAndSum(total, item), init);
}

function multiplyAndSum(total, item) {
  return total + (item.price * item.amount);
}

console.log(shoppingCardTotal(items, multiplyAndSum, 0));
  // LOG = 30.35

In this last version, the shoppingCardTotal function uses the .reduce() method on the items array. It starts with an initial value of init and applies the multiplyAndSum function for each item in the array, accumulating the result.

The multiplyAndSum function remains the same, performing the multiplication and addition to calculate the subtotal for each item.

The result is then directly returned by the .reduce() method, eliminating the need for a separate totalPrice variable.

Overall, with reduce() our code is utilized and became more concise.

Using the reduce() method with an init and a callback function is advantageous in several ways:

Reusability: The reduce() method can be used for a wide range of reduce operations, not just for calculating the total price of items in a shopping cart. By abstracting the reduce functionality into a separate callback function, it becomes easier to reuse this code in other parts of your application or for other reduce operations.
Flexibility: By providing an initial value, we have greater control over the starting point to keep track of the cumulative sum. This means you can use the same reduce function for different types of data sets or with different starting values without having to write separate functions for each scenario.
Code readability: Using the reduce() method can make the code more readable and easier to understand, especially for developers familiar with this method. It can also make the code more concise compared to using a for loop or other iteration methods.

Please check other sources for more information[2], [3].

Keep coding and have a great day!
Bouquet

References:
[1] Learn more about for ... of
[2] Array.prototype.reduce()
[3] JavaScript Array reduce()

The “FIRST-CLASS” citizens of JavaScript: FUNCTIONS Part 2

Buket [/boʊˈkeɪ/] — Sun, 30 Apr 2023 03:37:38 +0000

Handy Articles for Beginners: Functions Part-2

Welcome to the Part-2 of my Functions Series. In this post, I will explain 3 common ways of writing functions.
click here for Part-1.

1. Function Declaration
This is the most common way to write functions. We use the keyword “function” that is followed by the name of the function, pair of parentheses that accommodate parameters, and the curly braces holds the function body.

function divide(number1, number2) { 
   return number1 / number2;
}
divide(90, 15);
// 6

function sayHello() {
  console.log("Hello!");
}

function addNumbers(x, y) {
  let result = x + y;
  return result;
}

HOISTING
When we write our function with the function declaration, we can invoke our function before or after our function. This is called HOISTING and it is a privilege comes from using the 'function' keyword when creating a function.

greet("Anna");

function greet(name) {
    console.log('Hello, ' + name)
}
// Hello, Anna

2. Function Expression
Function expression involves defining a variable and assigning a function to that variable. This way of writing function is very useful to pass a function as an argument to another function.

const sayHello = function() {
  console.log("Hello!");
};
sayHello()
//Hello!

const divideNumbers = function (number1, number2) { 
   return number1 / number2;
}
divideNumbers(8, 2)
//4

-Xtra info- My variable divideNumbers has a value of an anonymous function. An anonymous function is a function without a name. It's a handy tool that programmers use to make their code more flexible and reusable (we create anonymous function on the fly, all the time). The syntax of an anonymous function is:

function (){ 
   function body
}

The function that is assigned to a variable also known as a function definition. I want to add an important note here. As you see, the function definition of my variable divideNumbers has the 'function' keyword. So, do you think if I try to invoke divideNumbers before function expression, will it work?

No, it will not work!
Why? The function here is a function definition that is assigned to a variable. I didn't invoke my function. I invoked my variable, to make my function definition to do the work, in this case dividing two numbers.

Remember;
HOISTING is a privilege comes from using the 'function' keyword when creating a function. We didn't create an independent function, we created a variable and assigned a function to that variable. This is the main difference between function declaration and function expression.

3. Arrow Function Expression
This function writing is a shorthand way to define a function using the => arrow notation. Arrow function expression is especially useful when you want to create an anonymous function or when you need to use a concise syntax.

Syntax of arrow function expression:

const divideNumbers = (number1, number2) => { 
   let result = number1 / number2;
   return results;
}
divideNumbers(8, 2)
//4

If your arrow function has only one line, you can remove the curly braces {}. You can also remove the word 'return' because arrow function will return the value automatically if the function is one line.

const functionName = (parameter1, parameter2) => parameter1 + parameter2;

const divideNumbers = (number1, number2) => number1 / number2;

If your arrow function has only one parameter, you can remove the parentheses ().

const greet = name => console.log("Hello, " + name);


const addTwo = number => number + 2;

The “FIRST-CLASS” citizens of JavaScript: FUNCTIONS Part 1

Buket [/boʊˈkeɪ/] — Tue, 25 Apr 2023 01:48:00 +0000

Handy Articles for Beginners: Functions Part-1

There are many topics and concepts to cover about functions, so I’ll divide them in parts. Today’s topics will be basics of functions: parameter, argument, and the difference between console.log() method and return statement.

Functions are the MOST IMPORTANT one code unit in JavaScript. They are considered first-class citizens in JavaScript due to their unique capabilities, such as being able to be assigned to variables or arrays, passed as arguments to other functions, and returned as values from functions. Moreover, functions can also be created on the fly using anonymous functions, which gives developers great flexibility and versatility. They are “reusable” block of codes and we can call them multiple times. They also let us to break down our codes into smaller pieces and manage the order of statements needed to be executed. All these features make functions an essential and powerful tool for developers to write clean, efficient, and effective JavaScript code.

I love the way my instructor defines functions with only three words: INPUT-ACTION-OUTPUT! I advise you to remember functions with those three words.

Functions take INPUTs (aka parameter/s), then put those inputs in ACTION (execution of task/s) and return a value as OUTPUT.

The most common way to write functions is using the keyword “function” that is followed by the name of the function, pair of parentheses that accommodate parameters, and the curly braces holds the function body.

Let's see an example of a function format.

function nameOfMyFunction(parameter) { 
  console.log(parameter);
} 
nameOfMyFunction(argument);

-Xtra info- The function I created is named "nameOfMyFunction", which follows the camelCase naming convention. This is a best practice commonly used by developers in most programming languages. For example, myGreetingsForUsers is easier to read than mygreetingsforusers. Further discussion can be found at TechTerms.com[1]

A parameter is a NAMED variable that is passed to a function and is used to import arguments into functions. An argument is the real value that we will get as an output which replaces the parameter. In other words, our parameter is assigned value of our argument. We import our argument into functions with parameters by invoking our function.

What does INVOKING our function means? Well, simply put, it is telling our function to do the action and give us the output. Invoking a function is like making a call to a friend. You dial their number (call the function), and they answer (the function executes). Further in formation can be found at this website that have resources for developers written by developers [2].

Syntax to "invoke" or "execute" or "call" a function is adding a pair of parentheses () after its name. Your argument/s goes inside the parentheses.

nameOfMyFunction(argument);

Let’s write a function called greet. I want my function to greet the user when username is provided. So, I need to have a parameter for my function which will import my argument (the username).

function greet(name){ 
  console.log('Hello, ' + name)
}
greet('Anna'); 
// -> output in my console: Hello, Anna

Notice that our parameter is name, and our argument is Anna.

Below you can see the screenshot of my VS Code and the console.

I will kindly ask you to practice upcoming examples with me. You can use your vs code and your browser, or you can simply use online node.js through this link. https://replit.com/new/nodejs

-Xtra info- It is always a good idea to name your function and its parameter/s related to the execution of it. When you have long and complicated codes, function names will be helpful to remember the tasks. It will also increase the readability for you and other developers.

Functions can have one or more parameters and arguments. Let’s write another function called add. I want my function to add two parameters (numbers) together and return the sum.

function add(num1, num2) { 
  return num1 + num2;
}
add(1, 2)
// -> output in my console: 3

Notice that our parameters are num1, num1, and our arguments are 1, 2.

There is a difference between ‘console.log()’ and ‘return’. Let’s examine it with examples.

function sayHello(){ 
   console.log('Hello world!');
}
sayHello();
//If we invoke our function above in our console, we’ll get:
// Hello world! 
// undefined




function sayHello(){ 
   return ('Hello world!');
}
sayHello();
//If we invoke our function above in our console, we’ll get: 
// Hello world! 
//We’ll NOT get undefined.

-Before I explain the difference, notice that I didn’t declare any parameter for my sayHello function. I don’t need a parameter or an argument in these functions because I told JavaScript ‘exactly’ what to do, inside the function body between the curly braces: greet the user with string of “Hello world”.-

As we see in the examples, console.log() logs the output and also logs ‘undefined’ whereas return gives us only the output without ‘undefined’.

The console.log() method only logs the output to the web console. It spits out what is inside the parentheses, so to speak. When we use console.log, our function does not return a value. Therefore, it returns 'undefined' because there is no value defined other than just logging the data to the console.

The ‘return’ statement returns a value to us. In the greet function, we return a value of ‘Hello world!’. The ‘undefined’ value is defined. Therefore, we don’t get undefined in our console when we use return because return statement refers to the result of doing an action with the given statement.

I could use a parameter and argument if the username will change.

function sayHello(username) {
  console.log('Hello ' + username);
}
sayHello('Daniel')
//If we invoke our function above in our console, we’ll get:
// Hello Daniel! 
// undefined

sayHello('Jessica')
// Hello Jessica!
// undefined




function sayHello(username) {
  return('Hello ' + username);
}
sayHello('Daniel')
// Hello Daniel! 
// We’ll NOT get undefined.

sayHello('Jessica')
// Hello Jessica!
// We’ll NOT get undefined.

Let’s compare console.log and return with one last example.

function add(num1, num2) {
  console.log(num1 + num2); 
}
add(4, 5)
// 9
// undefined


function add(num1, num2) {
  console.log(num1 + num2); 
  return "check this out"
}

add(4, 5)
// 9
// check this out (instead of undefined because we used return statement)

Stay tuned for Part-2 which will be about common way of writing functions!

Keep coding and have a great day!
Bouquet

References:

[1] - TechTerms.com 'camelCase'
[2] - MDN Function.prototype.call()