CRUD Operations in React JS

CRUD Operations in React JSIn the world of web development, CRUD operations are the foundation of any data-driven web application. CRUD stands for Create, Read, Update, and Delete, representing the basic operations used to manage data within a system. In React JS, these operations can be effectively implemented using the useState hook.

The useState hook in React JS provides a straightforward way to handle state within function components. With the help of useState hook, developers can easily create and manage state variables that hold and update data. By using this, React JS offers a very efficient approach to implementing CRUD operations.

Create: To create new data using the useState hook, you can define a state variable and initialize it with an initial value. This variable will hold the newly created data, such as user input from forms or UI components. By capturing and storing the input data in the state variable, you can easily create and track new information

Read: Reading or retrieving data using the useState hook is easy. By storing the data in a state variable, you can access its value and display it in the user interface. This allows users to view the existing data and interact with it seamlessly. You can leverage the useState hook to ensure smooth data retrieval and presentation.

Update: The useState hook simplifies the process of updating data. By modifying the value of a state variable using its corresponding update function, React triggers a re-render of the component, reflecting the updated data in the UI. This enables users to modify specific records and see the changes in real-time, ensuring a responsive and interactive user experience.

Delete: Deleting data with the useState hook involves removing or updating the state variable that holds the data. By removing the variable or setting it to null or undefined, React effectively deletes the associated data. This deletion can be accompanied by updating the UI to reflect the removal of the data, ensuring consistency and accuracy in your application.

By utilizing state variables and their corresponding update functions which are used to modify the values of the variables , developers can easily create, read, update, and delete data within functional components. 

The useState hook simplifies the process of managing data, ensuring seamless integration with user interfaces in such a way that the updates readily take place. 

To-Do List using useState Hook:

With the help of useState Hook, we can create a simple To-Do List that notes down the tasks that we have to finish. 

Features:

• The application displays a heading, a text input box for entering the tasks, a list that displays all the To-Do tasks, and 4 buttons that are used to “Add” and “Delete” “Edit” and “Update” the tasks
• Whenever the user enters the task in the input box and clicks the Add button, it will add the task to the list.
• Likewise, when the user clicks the delete button, the task will be deleted.
• The user also has an option to edit the tasks if required and update them.
• All the elements are centered vertically with respective CSS.

Code:

Output:

Refer to the github link provided for the code

How are CRUD operations implemented in this example?

Create (Add): Adding a new todo with the addTodo function.

Read (Display): Displaying the existing todos using todos.map.

Update (Edit and Update): The user can edit and update the tasks. 

Delete: Removing a todo with the deleteTodo function.

Advantages:

• It provides a straightforward way to manage state in functional components.
• It promotes a more functional programming style, making components easier to understand and test.
• It handles state changes and triggers component re-rendering automatically.

Disadvantages:

• It doesn't offer built-in mechanisms for performance optimization
• useState can only be used in functional components.
• When using complex state objects, useState performs a shallow comparison for updates, which may lead to unintended behaviors

Conclusion:

The useState hook in React JS is a powerful tool for simplifying state management within functional components. Developers can use this hook to easily add, access, and update state variables, allowing them to create dynamic and interactive user interfaces. The useState hook is an essential feature for any React JS developer due to its simplicity, reusability, and performance optimisations.

References:

https://www.w3schools.com/react/react_usestate.asp

https://legacy.reactjs.org/docs/hooks-state.html

https://www.freecodecamp.org/news/how-to-perform-crud-operations-using-react/

https://www.geeksforgeeks.org/how-to-do-crud-operations-in-reactjs/ 

Written by- Eesha Smitha Ravella

Reviewed by - Sumit Dhakad