The idea behind the project was to give developers an understanding of how React hooks work and how one can implement them in their React project. So I created a sample To-Do list application that was built using the most common React hooks (useState, useEffect, useReducer and useContext).

What it does

The project is built sequentially using each of the above-mentioned hooks, elaborating on the functionality of each hook, how it is used and where it fits in the application we are building and why it is the right fit for this functionality. The final outcome is a working To-Do list application that is built using React hooks.

How I built it

I used different React hooks to make the project and then wrote posts on each of them separately. Once that was done, I combined all of them into a single post which explained all the hooks in one post and ended up being a compilation of all the commonly used hooks.

Challenges I ran into

Deciding what level of depth to get into was a challenge since there are a lot of ways to write such a tutorial. In the end, I assumed the reader knows a few things and made it as a tutorial that targets intermediate developers instead of elaborating on all the concepts and getting into the rabbit hole of explaining everything from scratch for a beginner. Creating the video was another challenge that I ran into since I have not recorded a lot of videos and it is a little tedious process for me.

Accomplishments that I'm proud of

It was an interesting project to put everything in place and get it done before the deadline. I am proud of making a submission in the challenge since I usually end up not finishing the project because of other commitments.

What I learned

I learned about React hooks and in the research process, I went through the React documents to ensure I was not putting out something incorrect. The research process made me learn things about hooks which I did not have knowledge about as well as some performance-related points around hooks which I would not have learned had I not been writing this tutorial.

What's next for How to create a To-Do list application using React Hooks

I might add a few of the less commonly used hooks to the application and explain about them as well. I will try and find use cases with respect to the To-Do list application where they fit into.

Built With

Share this project: