youhoc

Pages
- Home
- Modern App Guidelines
- Linux
  Day 1: Linux Distributions & Navigation
  Day 2: User Management
  Day 3: File Permission & Ownership
  Day 4: Package Management
  Day 5: Services Management
- Javascript
  JS The Weird Part
  Execution Context
  Types & Operators
  Objects & Functions
  Error Handling & Strict Mode
  Typescript, ES6, Tra
  Modern JS
  JS in the Browser
  Data Storage JSON
  Modern JS
  Advanced Objects & Methods
  Webpack & Babel
  Async
  jQuery
  In-depth Analysis of jQuery
  React-ready JS
  Arrow Function
  Template Literals
  Logical AND, OR, Ternary, Nullish Operators
  Destructuring & Rest Operator
  Array Method
  Immutability and Spread Operator
  Promises, Async/Await, Callback
- PHP
  gruntJS
  composer
  MySQL
- Docker
  Container Basics
  Container Networking
  Container Image
  Container Volume & Persistent Data
  Dockerfile
  Docker Compose
  Docker Registry
- Node.js
  1. Installing & Exploring
  2. Core Modules
  3. Get User Input
  File System & Input Arguments
  5. Express Web Server
  6. Deploy to Heroku & Github
  Authentication
  7. Databases
  8. Rest API
- ReactJS
  React from Andrew
  Summary from Next
  1. Basics
  2. React Components
  3. Webpack
  4. Styling with SCSS
  5. React Router
  6. React Hook
  Modern React From The Beginning
  Intro to JSX
  Vite Build Tools
  Basic Component Creation
  Component State
  Props & Component Composition
  useState with Inputs & Form Submission
  useEffect, useRef & Local Storage
  Async / Await and Http Request in React
  React Router: Declarative Mode
  ContextAPI
  React Router: Framework Mode
  File-routing & HTML Layouts
  Server-side Data Query
  Links & Navigation
  Loaders
- Typescript
  Type User vs UserProp
- Payload CMS

youhoc

...

6. React Hook

Core Concept

Imagine your app’s state is described as a plain object.

For example, the state of a todo app might look like this:

This object is like a “model” except that there are no setters. This is so that different parts of the code can’t change the state arbitrarily, causing hard-to-reproduce bugs.

To change something in the state, you need to dispatch an action.

An action is a plain JavaScript object (notice how we don’t introduce any magic?) that describes what happened. Here are a few example actions:

Enforcing that every change is described as an action lets us have a clear understanding of what’s going on in the app. If something changed, we know why it changed. Actions are like breadcrumbs of what has happened.

Finally, to tie state and actions together, we write a function called a reducer. Again, nothing magical about it—it’s just a function that takes state and action as arguments, and returns the next state of the app. It would be hard to write such a function for a big app, so we write smaller functions managing parts of the state:

And we write another reducer that manages the complete state of our app by calling those two reducers for the corresponding state keys:

⁠

useState

Manage state for Functional Component

States in FC can be an object, OR number, string, anything

in CC, state must be an object

useStage always exports 2 things: states, stateAction

use Array destructuring to get those 2 exported things

With React Hook, React NOW WANT you to use useStage multiple times to track multiple state values

What if we use an object to manage multiple state values?

When we change state values, we have to declare the WHOLE OBJECT {count: ...,name:..., otherState:...}

When we call any value, we have to provide object name state.things (longer code)

Even though you can overide with ...state

A full explaination here:

⁠

https://www.udemy.com/course/react-2nd-edition/learn/lecture/14098990#overview⁠

⁠

Lifting State

Xem video của thầy của Vinh để hiểu hơn

useEffect

Manage Lifecycle for FC

Similar to:

componentDidMount

componentDidUpdate

componentWillUnmount

useEffect run everytimes a Component has changed (useState)

run 1st times = componentDidMount

run every change state = componentDidUpdate

useEffect to sync state, props within components

update Page Title, User Counts...

useEffect with Condition / Dependencies

Add 2nd call to useEffect

unlike CC, all methods must go to under 1 componentDidMount or DidUpdate

Clean-up useEffect

componentWillUnmount

to de-register addEventListener when a button disappear

useReducer

A reducer contains 2 things: state, and action

A state change is defined by an action

A reducer function connect state and action

Use dispatch to run defined functions in reducer

If EASY STATE - useState

If more COMPLEX STATE - useReducer

remove logic from components, store somewhere upper

1. Create a reducer (state + action)

2. Import and Use

useContext

Passing props around is the hardest thing to do.

An example is here:

⁠

https://www.udemy.com/course/react-2nd-edition/learn/lecture/14099002#overview⁠

⁠

1. Create Context

2. Pass Context to Children in JSX

Import Context

Wrap around return JSX with Context

Pass values in Context Provider

All children and its grand-children will be able to receive these values

Remove passing values in Components declaration

3. Receive passing Value at Children

import Context

remove passed Props (no passing through component anymore)

receive passed values through destructuring Context