


We'll use this identifier when we want to refer to a specific task.

Where id is a unique identifier using v4() from the uuid library.

A task object will have the following structure: So, we'll need to use states to keep track of these tasks. A user should be able to write a task, click the add button and have the task appear in the table below. what states will we need in the case of our to-do list app? The first question to think about is what are some things that you are storing/holding? What are the things, that when updated, you'd like the component to re-render? What first comes to mind is an array of tasks. With hooks, you can now incorporate states within your functional components using useState(). States are objects that hold information, when states are updated it forces the component to re-render. Before hooks, if you ever wanted to use states in your components, you needed to use classes. Hooks don’t work inside classes - they let you use React without classes. Hooks are functions that let you “hook into” React state and lifecycle features from function components. Let's take a look at the official React docs and see what React hooks are ( link): That's why it is important to understand what they are. React hooks play a crucial part in almost every React app you'll create. You've probably heard this term many times while learning React, and there's a reason for that. Check it out:Īlright! Let's get started with React Hooks. By reading this blog post, I hope that you'll gain a deeper understanding of Hooks and Contexts and you'll have made your own custom hook (yay!). The app is a simple to-do list app, but I tried my best to expose myself to concepts that seem daunting to some (including myself) in the beginning. In this blog post I will go into the details of the app and provide my favorite resources when it comes to learning React. It took me a couple of days to get a grasp of the idea, but I managed to create my first React app on day 5 of learning React. What better way to learn than to apply concepts directly to a practical project? In my case, I learned about React Hooks and Contexts a few days ago. One of the things that has worked out for me while learning a new language or framework is to create a small app as soon as I have learned a few crucial concepts.
