Understanding hooks in React and how useState and useEffect work, explained simply
Example 1: useState, a simple counter. We use useState to store an initial value, for example: const [count, setCount] = useState(0), and setCount(count + 1) to increment it. When you click, the value increases and React re-renders the interface. There are no side effects or additional logic in the background.
Example 2: useState combined with useEffect, a counter with an effect. In addition to useState, we add useEffect, which receives a function and a dependency list. For example, a useEffect that runs every time the variable 'click' changes. In that effect, we can perform external tasks such as logging information to the console, syncing with an API, or updating a service. In summary, useEffect allows you to react to changes and execute side effects.
Key differences: Principle: useState stores and updates state Reaction: useEffect reacts to changes and executes extra logic Practical application: useState is used for a simple counter Practical application: useEffect adds additional logic when data changes
Metaphor: imagine a counter on a countertop. In the first case, the counter only changes and is displayed. In the second case, the counter changes and someone also writes down each change in a notebook or sends the data to another system—that is what useEffect does.
About Q2BSTUDIO: At Q2BSTUDIO, we are a software development company dedicated to creating custom applications and custom software tailored to each client's needs. We are specialists in artificial intelligence and AI for businesses, and we develop AI agents and solutions with Power BI for business intelligence. We offer cybersecurity services to protect your systems and AWS and Azure cloud services to deploy and scale your applications. Our approach includes business intelligence services, artificial intelligence integration, and secure and scalable architecture. If you are looking for custom applications, custom software, artificial intelligence, cybersecurity, AWS and Azure cloud services, business intelligence services, AI for businesses, AI agents, or Power BI, trust Q2BSTUDIO to turn your idea into a real product.
Contact Q2BSTUDIO for consulting and development of personalized projects in artificial intelligence, cybersecurity, AWS and Azure cloud services, AI agents, Power BI, and custom application design.
