---
title: "React Notes — state, props, setState, binding this — Part 3"
description: "Part 3 of my React notes — covering the difference between state and props, how setState works, and the various ways to bind `this`."
canonical_url: "https://blog.markkulab.net/en/post/learn-react-part-3"
author: "Mark Ku"
author_url: "https://blog.markkulab.net/en/author/mark-ku"
site: "Mark Ku's Tech Notes"
date_published: "2022-07-24 01:02:01 +0800"
category: "Frontend"
tags: ["react", "state", "props", "setstate", "javascript", "frontend", "學習筆記"]
language: "en"
license: "CC BY 4.0"
license_url: "https://creativecommons.org/licenses/by/4.0/"
attribution: "when reusing or quoting, credit the author and link back to the original"
---

# React Notes — state, props, setState, binding this — Part 3

## The difference between state and props
In React, the main triggers for re-rendering are `props` and `state`.

### 1. props
Parameters passed in from outside the component. They are read-only and immutable — once created, they cannot be changed; you can only destroy and recreate to change the data. React decides whether an object has been modified by comparing memory references.

### 2. state
* Private state belonging to a component, mainly used for passing data inside it. Apart from initialization in the constructor, modifications must go through `setState`, otherwise no re-render will happen (`setState` is asynchronous and doesn't update immediately).
* Any state change in React that should trigger a render must call `setState`.
* React's `setState` is asynchronous; the second-argument callback is the way to read the final value.

```
this.setState ({ count: this.state.count + 1 }, () => {
 console.log(this.state.count);
});
```
* Calling `setState` twice with the same operation only runs once. You can pass a function to read the previous lifecycle's state (`preState`, `preProps`):

```
onClick={() => {
            this.setState(
              (preState, preProps) => {
                return { count: preState.count + 1 };
              }
            );

            this.setState(
              (preState, preProps) => {
                return { count: preState.count + 1 };
              }
            );
          }}
```

## React components come in two flavors
### React Class Component (the old style)
![React component lifecycle diagram with mounting, updating, unmounting phases](https://blog.markkulab.net/content/markku/posts/learn-react-part-3/images/lgWfIZe.png)

#### Lifecycle 1: Initialization
#### componentDidMount() — fires right after the component is mounted
#### Lifecycle 2: Update
Called when the component receives a new prop or after an update.
#### static getDerivedStateFromProps(props, state)
#### componentDidUpdate(prevProps, prevState)
P.S. Be careful: any `setState` call inside the component will re-trigger `componentDidUpdate`, so make sure your logic doesn't recurse infinitely.

#### shouldComponentUpdate — should the component update? Default `true`; return `false` to skip the update.
```
shouldComponentUpdate(nextProps, nextState) {
  return true; // 反回true 更新 false 不更新
}
```
#### Lifecycle 3: Destruction

#### componentWillUnmount() — called right before the component is destroyed; useful for avoiding memory leaks.

### Function component (new projects' default `App.tsx` is also a function component now)

```
interface RobotProps {
  id: number;
  name: string;
  email: string;
}

interface RobotState {
  random:number
}

const Robot: React.FC<RobotProps,RobotState> = ({ id, name, email }) => {
const value = useContext(appContext)

  return (
          <div className={styles.cardContainer}>
            <img alt="robot" src={`https://robohash.org/${id}`} />
            <h2>{name}</h2>
            <p>{email}</p>
            <p>{value.username}</p>
          </div>
  );
};

export default Robot;
```

## Two ways to get the correct `this` inside a function

### 1. bind this
```
onClick={this.handlerClick.bind(this)}>
```
### 2. arrow function — `this` will point to the React object itself
```
handlerClick = (e) => {
    this.setState({ isOpen: !this.state.isOpen });
};
```

---

## About this article and its author

Originally published on [Mark Ku's Tech Notes](https://blog.markkulab.net/en/post/learn-react-part-3)

License: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — when reusing or quoting, credit the author and link back to the original

### About the author

**[Mark Ku](https://blog.markkulab.net/en/author/mark-ku)** — Software Solution Provider

- 10+ years senior software engineer, now an AI Builder
- Focused on large-platform architecture — North-American e-commerce, AI SaaS subscription billing
- Combining AI Agents and automation to build evolvable product foundations

### Free tools built by the author

All of these are free to use:

- [Free PDF Sign Tool](https://blog.markkulab.net/en/tools/pdf-sign): Online PDF sign tool — draw, type, or upload a signature, then drag, resize, and download. Everything runs in your browser; nothing is uploaded.
- [VS Code Refactory](https://blog.markkulab.net/en/tools/refactory): Refactory is a VS Code refactoring extension: 34 actions plus a 37-rule code-smell inspection layer with a Code Health dashboard, across 18 languages, backed by 534 tests. It learns your repo's conventions: where interfaces live, where DI is registered, whether 'use client' belongs. It ranks files by git churn × complexity so you know what to fix first, and hands any smell to the Claude Code already on your machine. Free to use, and your source never leaves your computer.
- [DB-Kit Database Manager](https://blog.markkulab.net/en/tools/db-kit): DB-Kit is a lightweight, cross-platform database manager built with Tauri + Rust + React. Manage MySQL, MariaDB, PostgreSQL, SQL Server, Oracle, SQLite, MongoDB, Redis, Kafka, Elasticsearch and RabbitMQ from one consistent interface: passwords encrypted in the OS keychain, SSH tunnels, full CRUD, a visual query builder, stacked multi-statement result sets, cross-connection data transfer and compare/sync, Excel / CSV import & export, visualized execution plans, ER diagrams, scheduled backups, SQL stress testing with p50–p99 latency percentiles, a 15-rule SQL review engine, Kafka message browsing with monitoring & alerts, a bilingual UI (Traditional Chinese / English), a built-in AI assistant (natural-language SQL, AI review and tuning advice) and the dbk CLI. Free and open source (MIT), with installers for Windows, macOS and Linux.
- [VS Code Super Mermaid](https://blog.markkulab.net/en/tools/super-mermaid): Super Mermaid is a VS Code extension for beautiful Mermaid diagrams out of the box: auto-colored live preview, mouse pan & zoom, high-res PNG / SVG export, 21 templates and multiple themes. Free and open source (MIT).
- [React Super Mermaid](https://blog.markkulab.net/en/tools/react-super-mermaid): react-super-mermaid is an open-source React component library: render beautiful Mermaid diagrams with a single <MermaidViewer>, with built-in colorful / sketch themes, pan & zoom, in-diagram search, and high-res SVG / PNG export. Lightweight, SSR-safe, fully typed. Free and open source (MIT).
- [Jira / Confluence Super Mermaid](https://blog.markkulab.net/en/tools/jira-super-mermaid): An Atlassian Forge app: write Mermaid syntax directly inside a Jira issue or a Confluence page and get flowcharts, sequence diagrams, state machines and Gantt charts. 11 diagram types, SVG / PNG export, light and dark themes, full CJK support. Runs on Atlassian: your diagrams live in your own site and the app calls no third-party service. Free, coming soon to the Atlassian Marketplace.
- [Mermaid Live Preview](https://blog.markkulab.net/en/tools/mermaid-preview): Write Mermaid in your browser, see it render instantly, and share the whole diagram as a single link. No sign-up, nothing uploaded to a server, and mermaid.live share links work as-is.
- [React Intl Phone Number](https://blog.markkulab.net/en/tools/react-intl-phone-number): react-intl-phone-number is an open-source React component: framework-agnostic and antd-free, with E.164 in/out, a searchable flag / country-code dropdown, configurable validation levels (strict / mobile-strict / loose), themeable CSS, and i18n — phone logic powered by google-libphonenumber. Lightweight and fully typed. Free and open source (MIT).
- [Uptime Kuma Cluster](https://blog.markkulab.net/en/tools/uptime-kuma-cluster): Turn single-node Uptime Kuma into a highly available cluster: OpenResty + Lua smart load balancing, shared MariaDB state, health checks and automatic failover, plus cluster-management REST APIs. One Docker Compose command to start. Free and open source (MIT).
- [Special Education](https://blog.markkulab.net/en/education): Learning materials crafted for special education students

### Daily podcasts

- [Mark's Tech Insights — Daily AI News](https://blog.markkulab.net/en/category/tech-news): Daily curated AI and tech trends. Catch the latest developments via audio summaries — covering AI applications, software architecture, DevOps, and engineering practice. — RSS: https://blog.markkulab.net/feed.xml
- [AI股市蝦聊](https://blog.markkulab.net/en/category/ai-stock-chat): Every trading day, an AI-analyzed take on the Taiwan stock market, delivered as a two-host conversation covering the session and the next-day outlook. — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml
- [開源好物週報](https://blog.markkulab.net/en/category/open-source-weekly): A weekly two-host pick of free open-source tools surfaced from real Hacker News, GitHub, and Reddit buzz — what pain they solve and the fastest way to get started. — RSS: https://blog.markkulab.net/open-source-weekly/feed.xml

### Newsletter

[Subscribe to the newsletter](https://blog.markkulab.net/en/subscribe) — Be the first to know about new posts. No spam, unsubscribe anytime.