When we hear about companies or developers globally adopting a new technology, it typically signals that this technology addresses challenges they've faced for quite some time. Currently, one of the most popular libraries catching developers' attention is React, with a whopping 40.58% of developers worldwide using it. In this post, we'll dive deep into one of React's renowned hooks: "useState."
useState for what ?
useState is like a helper for your website. What's it helping with? Well, think about a website you made that shows the current time, ticking every second. That changing time is what we call the "state" of your site. But here's a thing: every time the time ticks, the website feels like it needs to redraw itself. That can make things slow. Not good, right?
Thankfully, with useState, we have a way to tell the website, "Hey, just change the time, no need to refresh everything!" It makes sure the site stays fast. Now, a little puzzle for you: "How would you use useState to handle different state changes smoothly?"
15 Challenges to Master useState...
These 15 challenges not only introduce you to how to use useState. It will also give you an idea of where you can use this useState for effective state management. I hope you are already familiar with useState at least theoretically. Now we have few problem statements by using React useState let's learn how we can solve them.
Problem Statements...
Help me create a web application where I can...
increase or decrease the count
add my Tasks to my TodoList
switch between the light and dark modes of the website.
To organize content into categories
collect the form data from user
play a Quiz App
Create collapsible Sections where the user can see the content when he clicks on it
enter username of length - 10
rate the website out of 5 ⭐
Pick a Color by adjusting the RGB ranges
add Suffix "Stark" to the entered name
move between pages(pagination)
Search for a fruit
have drop-down menu
Toggle Password
1. CounterApp
A counter app lets users increase or decrease the number. The primary state here is the current count value. By using the useState hook, you can set and change this value based on user actions, giving real-time feedback.
2. TodoListApp
the Todo list lets you add, delete, and mark tasks as complete. The state contains a list of tasks, where each task might be an object with properties like text and completion status. User actions manipulate this state, either adding new tasks or removing existing ones.
3. ThemeApp
To toggle between light and dark modes. Here, the theme state tracks the current theme. Buttons or switches can be used to toggle between themes, providing a more personalized user experience. when we work on big projects it is important to pass the theme state property by wrapping out App.js inside the Context using useContext. If we pass the props from parent to childs child's component it will lead Prop Drilling issue.
4. Tabbed Content View
To switch between different sections or categories of content. The active tab state keeps track of which content to show. This pattern is handy for organizing large amounts of content without overwhelming the user.
5. Form App
Collect and display form data. States are used to monitor input values. As users type, the input state updates in real time. When the form is submitted, you can process or display the collected data.
6. Quiz App
Present users with questions and collect answers. The current question index state tracks which question is being shown, while another state keeps the user's answers. At the end, you can compare the user's answers to the correct ones to generate a score.
7. Collapsible Sections
Hide or show content based on user interaction. A boolean state determines whether a section is open or closed, making it a great tool for FAQs or extended content.
8. Character Limit
Restrict the number of characters users can type into an input field. The state tracks the input value and updates it as users type, while also showing how many characters are left. when we want username size do not exceed 10 characters.
9. Rating System
Allow users to provide feedback by rating items. A rating value state holds the chosen rating, enabling you to capture and potentially save or display user feedback. It would be more helpful in improving the service or product your providing to the user.
10. Color Picker App
By using sliders, users can pick RGB colors. States for red, green, and blue values provide real-time feedback as users adjust sliders, updating the color display instantly.
11. Name Generator
combine user-input names with some prefixes or suffixes or numbers. The input name state tracks what the user types, while another state generates and holds a list of name variations.
12. Pagination Component
For long lists or tables, pagination divides content across pages. A current page number state determines which subset of items to display, ensuring users don’t get overwhelmed and can navigate efficiently.
13. Simple Search Filter
Filter a list based on user input. As users type into the search box, a search string state updates, and the displayed list updates based on this string, hiding non-matching items.
14. Dropdown Menu
A UI component that shows or hides a menu. A boolean state tracks if the menu is open or closed, toggling the display whenever the user clicks the button.
15. Toggle Elements
Enhance password fields by letting users see their password. The content display state switches between plain text and obscured, improving user experience.
Want to take this Challenge ?
Do you want to take this challenge too and cover other state changes that are missing in this challenges? feel free to fork my repository and don't forget to give a star ⭐ on GitHub. If you take this challenge or will you also want to write a blog series on this? then don't forget to tag me. I'm excited to read your blog too. That would give me a boost to do more. I will continue this series for other React Hooks too. Lets together make this as best learning repo for React.
Conclusion
Thank you for reading my blog. Don't forget to give a ❤️ and also share your insights. Let's connect on ...