# Deep Dive: Understanding useState in React

Research the React `useState` hook (state management for **functional components**), then write a full handwritten article in your own words.

Focus on *why* state updates cause UI changes and re-renders. Connect `useState` to React rendering, the Virtual DOM, and Hooks rules.

{% hint style="warning" %}
Own words. Not ChatGPT. Not Medium. Not “Ctrl+C engineering”.
{% endhint %}

### Goal (React useState hook)

* Understand `useState` as React’s **state hook** for functional components.
* Explain how `setState` (the setter function) triggers **re-renders**.
* Learn best practices for updating state (immutability, functional updater).

## Research Phase

**You are allowed to use:**

* Official React Documentation
* Technical blogs (Dev.to, Medium, etc.)
* YouTube tutorials
* AI tools (ChatGPT, Gemini, etc.)
* Code examples from GitHub

{% hint style="info" %}
This phase is for understanding only.
{% endhint %}

### How to Search Properly

**Search like this:**

* “React useState hook explained”
* “How React knows when to re-render”
* “Why normal variable does not update UI in React”
* “How useState triggers re-render”
* “useState setState async batching React 18”
* “useState functional updater stale state”
* “Updating objects and arrays in useState immutability”
* “Rules of hooks useState common mistakes”

Your goal is to connect concepts:

`State → setState → Re-render → Virtual DOM (reconciliation) → Functional components.`

## Writing Phase

**How to Write :**

* Close all AI tools.
* Do not open documentation while writing.
* Write from memory and understanding.
* Explain like you are teaching a beginner.

`If you can teach it simply, you understand it.`

**What You Must Write**

1. Introduction
   1. What `useState` is (React state hook)
   2. Where it’s used (React functional components)
   3. Why state matters (UI updates, re-renders, interactive apps)
2. The Problem It Solves
   1. Why plain variables don’t trigger UI updates
   2. Why React needs state to re-render
3. Syntax Breakdown
   1. Explain this line clearly:<br>

      ```javascript
      const [value, setValue] = useState(initialValue)
      ```
   2. Explain “initial state”, “setter function”, and “re-render”
   3. Explain when to use the functional updater form: `setValue(prev => next)`
4. At Least 3 Real Examples
   1. Examples can include:\
      Counter, Toggle visibility, Input field, Object state ... etc
   2. Each example must include:\
      Code -> Explanation -> What happens step-by-step when state changes
   3. Include at least one example updating an object or array immutably
5. Common Mistakes
   1. Mutating state (objects/arrays) instead of copying
   2. Reading stale state (missing functional updater)
   3. Assuming state updates are immediate (batching)
   4. Calling hooks conditionally (rules of hooks)
6. Conclusion

**Writing Structure**

Use this structure inside your `README.md`:

```md
# React useState Hook: Understanding State and Re-renders

## Introduction

## Why useState Exists

## Syntax Explanation

## How React Re-renders When State Changes

## Examples
### Example 1
### Example 2
### Example 3

## Common Mistakes

## Best Practices (Quick Checklist)

## Conclusion
```

## Rules

**Research Rules**

* Compare multiple explanations.
* Try to understand *why* something works, not just how.
* If you search “what is useState”, don’t stop there. Also search:\
  “why useState exists”\
  “how React re-render works”
* Dig deeper. Surface-level knowledge is obvious.

**Writing Rules**

* ❌ No AI writing
* ❌ No copy paste
* ❌ No paraphrasing tools
* ❌ No copying examples exactly from sources
* Clear formatting
* Clean code examples
* Minimum: 800 words

{% hint style="warning" %}
If it reads like documentation copy, it will be rejected.
{% endhint %}

## Submission

**Where to Submit**

1. Create new repo in GitHub
2. Inside the repository create:<br>

   ```bash
   README.md #starter file
   articles/
       useState-yourName/
           README.md # your article
   ```
3. Push your repo

<p align="center"><a href="https://github.com/organizations/ITC-Frontend-Advanced/repositories/new" class="button primary" data-icon="github">Start React Task</a></p>

{% hint style="danger" %}
**Deadline:** 7 days from task publication
{% endhint %}
