
This is a note for [a great React course](https://www.udemy.com/course/react-the-complete-guide-incl-redux/) on Udemy developed by [Maximilian Schwarzmüller](https://www.udemy.com/user/maximilian-schwarzmuller/)

# Demo 1: Expense Recorder

[Completed code in Github Repository](https://github.com/Zhenyuan-Li/Udemy-React-v2.0/tree/main/1_Expenses_Recorder)

## Main technique

1. Construct functional based component
2. Basic Usage of Component UI (Card)
3. First hook: useState()
4. Transfer data from parent to children (top to bottom): props
5. Transfer data from children to parent (bottom to top): create handler in parent, modify and update data in child.
6. Render a list of component (Array.map())
7. Conditional Rendering

## Notes

### Card.js:

Default variable in props: children, className

```jsx
function Card(props) {
  const { children, className } = props;
  const classes = `card ${className}`;

  // be careful on using this surrounding container UI :
  // pass the children and do not overwrite className;
  return <div className={classes}>{children}</div>;
}
```

### ExpenseForm.js:

Previous stage in useState() - when updated state depend on previous screenshot, normally happens on object or array type state.

```jsx
const [userInput, setUserInput] = useState({
  enteredTitle: '',
  enteredAmount: '',
  enteredDare: '',
});
const titleChangeHandler = (event) => {
  // if the update based on previous state make sure to use this approach
  setUserInput((prevState) => ({
    ...prevState,
    enteredTitle: event.target.value,
  }));
};
```

Two-way binding (input)

```jsx
<input
  type="text"
  time
  value="{enteredTitle}"
  onChange="{titleChangeHandler}"
/>
```

### NewExpense.js & ExpenseForm.js:

Bottom to top transfer example (also in **ExpensesFilter.js & Expenses.js**)

Conditional Rendering (simplify ternary expression using &&)

```jsx
function NewExpense(props) {
  const { onAddExpense } = props;
  const [isEditing, setIsEditing] = useState(false);

  // handle date bottom to up pattern (child to parent)
  const saveExpenseHandler = (enteredExpenseData) => {
    const expenseData = {
      ...enteredExpenseData,
      id: Math.random().toString(),
    };
    onAddExpense(expenseData);
    setIsEditing(false);
  };

  const startEditingHandler = () => {
    setIsEditing(true);
  };

  const stopEditingHandler = () => {
    setIsEditing(false);
  };

  return (
    <div className="new-expense">
      {!isEditing && (
        <button type="submit" onClick={startEditingHandler}>
          Add New Expense.
        </button>
      )}
      {isEditing && (
        <ExpenseForm
          onSaveExpenseData={saveExpenseHandler}
          onCancelExpenseData={stopEditingHandler}
        />
      )}
    </div>
  );
}
function ExpenseForm(props) {
  const { onSaveExpenseData, onCancelExpenseData } = props;
  const submitHandler = (event) => {
    event.preventDefault();

    const expenseData = {
      title: enteredTitle,
      amount: enteredAmount,
      date: new Date(enteredDate),
    };
    onSaveExpenseData(expenseData);
  };
  // ...
  // return ...
}
```

### ExpenseList.js

Conditional Rendering (early return)

List of Component example (also in **Chart.js**) - 8

```jsx
function ExpensesList(props) {
  const { items } = props;
  if (items.length === 0) {
    return <h2 className="expenses-list__fallback">Found no expenses.</h2>;
  }

  return (
    <ul className="expenses-list">
      {items.map((ele) => (
        <ExpenseItem
          title={ele.title}
          amount={ele.amount}
          date={ele.date}
          key={ele.id}
        />
      ))}
    </ul>
  );
}
```

### Expenses.js

The necessity of using key when rendering the list (performance & bugs).

```jsx
// Without the key: performance is bad, also bugs exists when involve state
// render the additional element at the end of div, and
// update the content inside of every div to match the array again.
// bugs: first element might be overwritten.
```


React Basics


This is a note for [a great React course](https://www.udemy.com/course/react-the-complete-guide-incl-redux/) on Udemy developed by [Maximilian Schwarzmüller](https://www.udemy.com/user/maximilian-schwarzmuller/)

# Demo 2: Course Goal (Styling in React)

[Completed code in Github Repository](https://github.com/Zhenyuan-Li/Udemy-React-v2.0/tree/main/2_Course_Goal)

## Traditional using CSS

- Each CSS file is in global scope (available in entire project).
- The naming might clash when the project involves many developers. (Even with BEM)

## 1) Inline style

- Highest priority, could override accidentally. Not recommended in most scenario

```jsx
<label style={{ color: !isValid ? 'red' : 'black' }}>Course Goal</label>
<input type="text" onChange={goalInputChangeHandler}
style={{ borderColor: !isValid ? 'red' : 'black',
        backgroundColor: !isValid ? 'salmon' : 'transparent'}}/>
```

## 2) Modify the className

- Good approach but still not fix the global issues
- Sometimes code might get messy

```jsx
<div className={`form-control ${!isValid ? 'invalid' : ''}`}>
  <label>Course Goal</label>
  <input type="text" onChange={goalInputChangeHandler} />
</div>
```

## 3) Styled-Components

- Used by many company, css in js, dynamic and easy to modify
- Styling mixed with component logic is not neat for somebody

```jsx
const FormControl = styled.div`
  margin: 0.5rem 0;

  & label {
    font-weight: bold;
    display: block;
    margin-bottom: 0.5rem;
    color: ${(props) => (props.invalid ? 'red' : 'black')};
  }

  & input {
    display: block;
    width: 100%;
    border: 1px solid ${(props) => (props.invalid ? 'red' : '#ccc')};
    background: ${(props) => (props.invalid ? '#ffd7d7' : 'transparent')};
    font: inherit;
    line-height: 1.5rem;
    padding: 0 0.25rem;
  }

  & input:focus {
    outline: none;
    background: #fad0ec;
    border-color: #8b005d;
  }
`;

// Extra: Without Dynamic rendering(just add the className)
// Extra:<FormControl className={!isValid && 'invalid'}>
<FormControl invalid={!isValid}>
  <label>Course Goal</label>
  <input type="text" onChange={goalInputChangeHandler} />
</FormControl>;
```

## 4) CSS Modules

- Best option personally, but need to configure ahead, luckily create-react-app already did that
- Add .module to css file name; import styles from .module.css.; use styles.className at target

```jsx
import styles from './Button.module.css';

const Button = (props) => {
  return (
    <button type={props.type} className={styles.button} onClick={props.onClick}>
      {props.children}
    </button>
  );
};
```


Styling in React


This is a note for [a great React course](https://www.udemy.com/course/react-the-complete-guide-incl-redux/) on Udemy developed by [Maximilian Schwarzmüller](https://www.udemy.com/user/maximilian-schwarzmuller/)

# Demo 7: Profile Form (Form & User Input)

[Completed code in Github Repository](https://github.com/Zhenyuan-Li/Udemy-React-v2.0/tree/main/7_Profile_Form)

## What to validate

### Case 1 When form is submitted

- Allows the user to enter a valid value before warning him.
- Avoid unnecessary warnings but maybe present feedback "too late"

### Case 2 When a input is losing focus

- Allows the user to enter a valid value before warning him.
- Very useful for untouched forms

### Case 3 On every keystroke

- Warns user before he had a chance of entering valid values
- If applied only on invalid inputs, has the potential of providing more direct feedback.

## Case 1

### Handling Input value

Two ways **SimpleInput.js L11-24** useRef() & useState()

### Easy Validation and drawback

Set initial isValid state to true might involved unexpected call when useEffect(), also the naming is vague. So combine it with untouched state.

## Case 2 & 3

### Improvement needed from Case 1

- The error only shows after submit: once add something and clean the input, the error disappear, which shouldn't.
- Solution: use blur handler with change handler(key stroke check).
- In a larger form, useEffect() to check all inputs. (comment out line)

### Issues:

- Too much repeat logic, and make the component not neat. Could extract into a separate UI component, and manage validation individually. Or custom hook.
- The finished code space by now is immigrate in **SimpleInput-v1.js**

```jsx
const SimpleInput = (props) => {
  // const nameInputRef = useRef();
  const [enteredName, setEnteredName] = useState('');
  const [enteredNameTouched, setEnteredNameTouched] = useState(false);
  const [enteredEmail, setEnteredEmail] = useState('');
  const [enteredEmailTouched, setEnteredEmailTouched] = useState(false);

  // It set as a state before, but configure to a var for clean code structure.
  const enteredNameIsValid = enteredName.trim() !== '';
  const nameInputIsInvalid = !enteredNameIsValid && enteredNameTouched;
  const enteredEmailIsValid = enteredEmail.includes('@');
  const emailInputIsInvalid = !enteredEmailIsValid && enteredEmailTouched;

  let formIsValid = false;
  if (enteredName && enteredEmailIsValid) {
    formIsValid = true;
  }

  // const [formIsValid, setFormIsValid] = useState(false);
  // useEffect(() => {
  //   // In a larger form, it should check all the inputs.
  //   if (enteredNameIsValid) {
  //     setFormIsValid(true);
  //   } else {
  //     setFormIsValid(false);
  //   }
  // }, [enteredNameIsValid]);

  const nameInputChangeHandler = (event) => {
    setEnteredName(event.target.value);
  };
  const emailInputChangeHandler = (event) => {
    setEnteredEmail(event.target.value);
  };

  const nameInputBlurHandler = (event) => {
    setEnteredNameTouched(true);
  };
  const emailInputBlurHandler = (event) => {
    setEnteredEmailTouched(true);
  };

  const formSubmissionHandler = (event) => {
    event.preventDefault();

    setEnteredNameTouched(true);
    setEnteredEmailTouched(true);

    if (!enteredNameIsValid && !enteredEmailIsValid) {
      return;
    }

    // Method 1: check with every keystroke (instance validation)
    // Also better when need to reset the input after submit.
    // console.log(enteredName);

    // Method 2: better if only interested when the form is submitted
    // const enteredValue = nameInputRef.current.value;
    // console.log(enteredValue);

    // Reach out of React to manipulate the HTML directly, not a good way.
    // nameInputRef.current.value = '';
    setEnteredName('');
    setEnteredEmail('');
    // Once it is submitted, it should be untouched again.
    setEnteredNameTouched(false);
    setEnteredEmailTouched(false);
  };

  const nameInputClasses = nameInputIsInvalid
    ? 'form-control invalid'
    : 'form-control';

  const emailInputClasses = emailInputIsInvalid
    ? 'form-control invalid'
    : 'form-control';

  return (
    <form onSubmit={formSubmissionHandler}>
      <div className={nameInputClasses}>
        <label htmlFor="name">Your Name</label>
        <input
          // ref={nameInputRef}
          type="text"
          id="name"
          onChange={nameInputChangeHandler}
          onBlur={nameInputBlurHandler}
          value={enteredName}
        />
        {nameInputIsInvalid && (
          <p className="error-text">Name must not be empty.</p>
        )}
      </div>
      <div className={emailInputClasses}>
        <label htmlFor="email">Your E-mail</label>
        <input
          type="email"
          id="name"
          onChange={emailInputChangeHandler}
          onBlur={emailInputBlurHandler}
          value={enteredEmail}
        />
        {emailInputIsInvalid && (
          <p className="error-text">Please enter a valid Email.</p>
        )}
      </div>
      <div className="form-actions">
        <button disabled={!formIsValid}>Submit</button>
      </div>
    </form>
  );
};
```

## Customized Hook for user input

- Keep in mind: the hook should be generalized! It must could adapted into every input.
- Receive validator function.
- The BasicForm.js is not implemented, but the method is the same as in SimpleInput.js

```jsx
const initialInputState = {
  value: '',
  isTouched: false,
};

const inputStateReducer = (state, action) => {
  switch (action.type) {
    case 'INPUT':
      return { value: action.value, isTouched: state.isTouched };
    case 'BLUR':
      return { value: state.value, isTouched: true };
    // case 'RESET':
    //   return { value: '', isTouched: false };
    default:
      return initialInputState;
  }
};

const useInput = (validateValue) => {
  const [inputState, dispatch] = useReducer(
    inputStateReducer,
    initialInputState
  );

  const valueIsValid = validateValue(inputState.value);
  const hasError = !valueIsValid && inputState.isTouched;

  const valueChangeHandler = (event) => {
    dispatch({ type: 'INPUT', value: event.target.value });
  };

  const inputBlurHandler = (event) => {
    dispatch({ type: 'BLUR' });
  };

  const reset = () => {
    dispatch();
  };

  return {
    value: inputState.value,
    isValid: valueIsValid,
    hasError,
    valueChangeHandler,
    inputBlurHandler,
    reset,
  };
};

export default useInput;
```

### Formik


Form & User Input


This is a note for [a great React course](https://www.udemy.com/course/react-the-complete-guide-incl-redux/) on Udemy developed by [Maximilian Schwarzmüller](https://www.udemy.com/user/maximilian-schwarzmuller/)

# Demo 6: Counter & Tasker (Custom Hooks)

[Completed code in Github Repository](https://github.com/Zhenyuan-Li/Udemy-React-v2.0/tree/main/6_Counter_and_Tasker)

## Introduction

- Outsource stateful logic into re-usable functions.

  Unlike "regular functions", custom hooks can use other React hooks and React state.

- Use customized hook does not mean we share state or effects across components. Just share the logic, not concrete state.

## Intuitive Example: Counter

- The only difference of Backward and forward is + and -. Use custom hook to get rid of code duplication.
- Always name hook with 'use-xx.js'
- Return the needed var, and accepted needed var like normal functions.

```jsx
import { useState, useEffect } from 'react';

const useCounter = (forwards = true) => {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      forwards
        ? setCounter((prevCounter) => prevCounter + 1)
        : setCounter((prevCounter) => prevCounter - 1);
    }, 1000);

    return () => clearInterval(interval);
    // That's potential bugs mentioned at 5, useCallback() use case.
  }, [forwards]);

  return counter;
};

export default useCounter;
```

```jsx
import useCounter from '../hooks/use-counter';

const ForwardCounter = () => {
  const counter = useCounter();

  return <Card>{counter}</Card>;
};

export default ForwardCounter;
```

## Realistic Example: Tasker

Both HTTP request feature has similar pattern (**fetchTasks() in App.js** & **enterTaskHandler() in NewTask.js**): isLoading, error, send request logic...

But since both of them involves hooks (useState, useEffect), normal function to remove duplication can not work.

useHttp customized hooks is a very typical customized hook example.

```jsx
import { useCallback, useState } from 'react';

const useHttp = (applyData) => {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const sendRequest = useCallback(
    async (requestConfig) => {
      setIsLoading(true);
      setError(null);
      try {
        const response = await fetch(requestConfig.url, {
          method: requestConfig.method ? requestConfig.method : 'GET',
          headers: requestConfig.headers ? requestConfig.headers : {},
          body: requestConfig.body ? JSON.stringify(requestConfig.body) : null,
        });

        if (!response.ok) {
          throw new Error('Request failed!');
        }
        const data = await response.json();

        applyData(data);
      } catch (err) {
        setError(err.message || 'Something went wrong!');
      }
      setIsLoading(false);
    },
    [applyData]
  );

  return { isLoading, error, sendRequest };
};

export default useHttp;
```

### Two way to avoid infinite loop

1. Wrap with useCallback().
   - Like stated in the previous, when **useEffect() in App.js**, we need to add fetchTasks() into dependency. But **sendRequest() in use-http.js** is depended on **transformTasks() in App.js**, which means infinite re-render loop exits.
   - To fix it, kind of a bottom-up approach:
     1. Wrap useCallback at **transformTasks()**(it depends on nothing)
     2. Wrap useCallback at **sendRequest()**, and add applyData to its dependency.
     3. add fetchTasks to useEffect() dependency.
   - Personally, it is the most complicated way, but it reserve the flexibility of customized hook.
2. Move received para down to return function.
   In this case, **requestConfig** is moved from **useHttp()** into **sendRequest()**. So useEffect() does not depend on that.
   </br> In this case, it is the better option, even applyData can be moved down to Comp.

```jsx
import React, { useEffect, useState, useCallback } from 'react';

import Tasks from './components/Tasks/Tasks';
import NewTask from './components/NewTask/NewTask';
import useHttp from './hooks/use-http';

function App() {
  const [tasks, setTasks] = useState([]);

  const transformTasks = useCallback((taskObj) => {
    const loadedTasks = [];
    for (const taskKey in taskObj) {
      loadedTasks.push({ id: taskKey, text: taskObj[taskKey].text });
    }
    setTasks(loadedTasks);
  }, []);

  const { isLoading, error, sendRequest: fetchTasks } = useHttp(transformTasks);

  useEffect(() => {
    fetchTasks({
      url: 'https://review-react-default-rtdb.firebaseio.com/tasks.json',
    });
  }, [fetchTasks]);

  const taskAddHandler = (task) => {
    setTasks((prevTasks) => prevTasks.concat(task));
  };

  return (
    <React.Fragment>
      <NewTask onAddTask={taskAddHandler} />
      <Tasks
        items={tasks}
        loading={isLoading}
        error={error}
        onFetch={fetchTasks}
      />
    </React.Fragment>
  );
}

export default App;
```


Custom React Hooks


This is a note for [a great React course](https://www.udemy.com/course/react-the-complete-guide-incl-redux/) on Udemy developed by [Maximilian Schwarzmüller](https://www.udemy.com/user/maximilian-schwarzmuller/)

# Demo 5: Star War Movies (Sending HTTP requests)

[Completed code in Github Repository](https://github.com/Zhenyuan-Li/Udemy-React-v2.0/tree/main/5_StarWar_Movies)

## Fairly Familiar Topic for Me, Hence Less Notes

### Things to pay attention on:

When sending request in useEffect(), to avoid the infinite loop, wrap the request function in useCallback()

```jsx
const fetchMoviesHandler = useCallback(async () => {
  setIsLoading(true);
  setError(null);
  try {
    const response = await fetch('https://swapi.dev/api/films/');
    if (!response.ok) {
      throw new Error('Something went wrong!');
    }

    const data = await response.json();

    const transformedMovie = data.results.map((movieData) => {
      return {
        id: movieData.episode_id,
        title: movieData.title,
        openingText: movieData.opening_crawl,
        releaseDate: movieData.release_date,
      };
    });

    setMovies(transformedMovie);
  } catch (error) {
    setError(error.message);
  }

  // stop loading no matter success or fail.
  setIsLoading(false);
}, []);

const addMovieHandler = async (movie) => {
  const response = await fetch('https://something.com/movies.json', {
    method: 'POST',
    body: JSON.stringify(movie),
    headers: {
      'Content-Type': 'application/json',
    },
  });
  const data = await response.json();
  console.log(data);
};

// Function is object, so it will change each time re-render the Comp.
// Hence if add it to the dependency, there is a infinite loop.
// We could omit it of course, but subtle bugs exist when the function involves external states.
// Solution: useCallback();
useEffect(() => {
  fetchMoviesHandler();
}, [fetchMoviesHandler]);
```

JS object to JSON(in request body): JSON.stringify(); On the contrary: response.json()

isLoading & error normally are not globalized state. Using conditional rendering to handle each cases:

state && Comp.; Or let abc = default, use if to change the content of abc.

```jsx
let content = <p>Found No movies...</p>;
if (movies.length > 0) {
  content = <MoviesList movies={movies} />;
}
if (error) {
  content = error;
}
if (isLoading) {
  content = <p>Loading...</p>;
}

return (
  <React.Fragment>
    <section>
      <AddMovie onAddMovie={addMovieHandler} />
    </section>
    <section>
      <button onClick={fetchMoviesHandler}>Fetch Movies</button>
    </section>
    <section>{content}</section>
  </React.Fragment>
);
```


Handle HTTP Request

This is a note for [a great React course](https://www.udemy.com/course/react-the-complete-guide-incl-redux/) on Udemy developed by [Maximilian Schwarzmüller](https://www.udemy.com/user/maximilian-schwarzmuller/)

# Demo 3: Simple User (Fragments, Portals, Refs)

[Completed code in Github Repository](https://github.com/Zhenyuan-Li/Udemy-React-v2.0/tree/main/3_Simple_User)

## Fragment

It's an empty wrapper Component.

It doesn't render any real HTML element to the DOM. But it fulfills React's/JSX requirement.

```jsx
import Fragment from 'react';
return (
  <Fragment>
    <AddUser onAddUser={addUserHandler} />
    <UsersList users={usersList} />
  </Fragment>
);
```

### Limitation of JSX

- Cannot return more than one "root" JSX element. (Because of React.createElement)

  **Solution**: Always Wrap Adjacent Element.

- Another problem: "div soup". In bigger app, tons of unnecessary div wrapper.

  **Solution**: Using Wrapper Comp.

```jsx
const Wrapper = (props) => props.children;

export default Wrapper;
```

## Portals

- Modal(Side-drawer, Dialogs...) Problem:
  Semantically and from a "Clean HTML" perspective, having a nested modal isn't ideal. It is an overlay to the entire page after all.

  p.s. div with onClick event: work but not a good practice.

  **Solution**: Portal(render the modal at specific position in HTML).

```html

<body>
  <div id="backdrop-root"></div>
  <div id="overlay-root"></div>
  <div id="root"></div>
</body>
```

```jsx
const ErrorModal = (props) => {
  const { onConfirm, title, message } = props;

  return (
    <>
      {ReactDOM.createPortal(
        <Backdrop onConfirm={onConfirm} />,
        document.getElementById('backdrop-root')
      )}
      {ReactDOM.createPortal(
        <ModalOverlay title={title} message={message} onConfirm={onConfirm} />,
        document.getElementById('overlay-root')
      )}
    </>
  );
};
```

## "ref": the second hook

- Allows us to get access to other DOM elements (Shorten the state-based input handler)
- Two way to handle the user input:

### useRef() (uncontrolled component) **AddUser.js**

Only use it to read the data. Never manipulate DOM directly using it.

```jsx
// Use only for read value. Leave the manipulating staff to React
const nameInputRef = useRef();
const ageInputRef = useRef();
const addUserHandler = (event) => {
  // We don't need the state to get access to user input (state-based solution)
  const enteredName = nameInputRef.current.value;
  const enteredUserAge = ageInputRef.current.value;
  const [error, setError] = useState();

  const addUserHandler = (event) => {
    event.preventDefault();
    props.onAddUser(enteredName, enteredUserAge);
    // Important: Rarely do that !
    // Do not use ref to manipulate the DOM
    nameInputRef.current.value = '';
    ageInputRef.current.value = '';
  };
};
return (
  <form onSubmit={addUserHandler}>
    <label htmlFor="username">Username</label>
    <input id="username" type="text" ref={nameInputRef} />
    <label htmlFor="age">Age (Years)</label>
    <input id="age" type="number" ref={ageInputRef} />
    <Button type="submit">Add User</Button>
  </form>
);
```

### state-based tracker (controlled component)

```jsx
const [enteredUsername, setEnteredUsername] = useState('');
const [enteredAge, setEnteredAge] = useState('');

return (
  <form onSubmit={addUserHandler}>
    <label htmlFor="username">Username</label>
    <input
      id="username"
      type="text"
      value={enteredUsername}
      onChange={usernameChangeHandler}
    />
    <label htmlFor="age">Age (Years)</label>
    <input
      id="age"
      type="number"
      value={enteredAge}
      onChange={ageChangeHandler}
    />
    <Button type="submit">Add User</Button>
  </form>
);
```

Fragments, Portals and Refs


This is a note for [a great React course](https://www.udemy.com/course/react-the-complete-guide-incl-redux/) on Udemy developed by [Maximilian Schwarzmüller](https://www.udemy.com/user/maximilian-schwarzmuller/)

# Demo 4: Dummy Auth (Effects, Reducers, Context)

[Completed code in Github Repository](https://github.com/Zhenyuan-Li/Udemy-React-v2.0/tree/main/4_Dummy_Auth)

## Effect - The Third Hook

### 1. What are the side effects? Anything Else

Tasks happen outside of the normal component evaluation and render cycle.

Since they might block, delay rendering.(might occur infinite loop)

- Store Data in Browser Storage
- Send HTTP request to Backend Servers
- Set & Manage Timers ....

#### 2. Use Examples

##### No dependency

never do that. useEffect() is useless, since the inner function will run every re-render.

##### Empty dependency []

only run once, when the app starts up (like componentDidMount()).
Like fetching some data from API before rendering the pages, and set states for those data.

##### Normal case [usrId, age]

Add all "things" you use in your effect function if those "things" could change because your component (or some parent component) re-rendered.

Also see the example of bouncing case & cleanup function

```jsx
// It is not a normal side effect, like http request.
// But we are re-render the interface based on some state changes, which is also a side effect.
useEffect(() => {
  // Directly approach is not ideal. It will run every key-stroke!
  // Hence, we use debouncing to optimise useEffect()
  const identifier = setTimeout(() => {
    console.log('Checking for validity!');
    setFormIsValid(emailIsValid && passwordIsValid);
  }, 500);

  // Cleanup function: runs before every new effect function execution and before the component is removed.
  // But it won't rin at the very first execution
  return () => {
    console.log('Cleanup!');
    clearTimeout(identifier);
  };

  // setFormIsValid can be omitted, since it is default function that never changed
}, [emailIsValid, passwordIsValid]);
```

## Reducer - The Forth Hook

### 1. Background

- When the states are complex (multiple states, multiple ways of changing it). useState() might be hard or error-prone to use.
- Some states are related (email & isValid)
- useReducer() more powerful state management (To avoid buggy, inefficient code).

### 2. Use Examples

**Login.js**

- Reducer function could be in a separate file (unrelated with rendering component)

```js
// create reducer funtion
const emailReducer = (state, action) => {
  if (action.type === 'USER_INPUT') {
    return { value: action.val, isValid: action.val.includes('@') };
  }
  if (action.type === 'INPUT_BLUR') {
    // the state could be guaranteed the latest one
    return { value: state.value, isValid: state.value.includes('@') };
  }
  return { value: '', isValid: false };
};
// Initialize
const [emailState, dispatchEmail] = useReducer(emailReducer, {
  value: '',
  isValid: null,
});
// usage
dispatchPassword({ type: 'USER_INPUT', val: event.target.value });
```

- Two ways to optimise the useEffect (decrease unnecessary run):
  - a) Debouncing: use setTimeout and cleanup function to reduce the frequent call (input field updates in every key stroke).
  - b) Deconstruction: if use reducer, deconstruct the state and give them new name added to dependency

```js

```

## Context API

### 1. Background

- props: most cases to configure comp. useContext() if the transfer level is too deep.

### 2. Example

```jsx
// Create store
import React, { useState, useEffect } from 'react';

const AuthContext = React.createContext({
  isLoggedIn: false,
  onLogout: () => {},
  onLogin: (email, password) => {},
});

export const AuthContextProvider = (props) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // It will run after every component re-evaluation. (if the dependency change)
  // In this case no dependency, only run once, after the app starts up
  useEffect(() => {
    const storedUserLoggedInInfo = localStorage.getItem('isLoggedIn');

    if (storedUserLoggedInInfo) {
      setIsLoggedIn(true);
    }
  }, []);

  const loginHandler = (email, password) => {
    // We should of course check email and password
    // But it's just a dummy/ demo anyways
    localStorage.setItem('isLoggedIn', '1');
    setIsLoggedIn(true);
  };

  const logoutHandler = () => {
    localStorage.removeItem('isLoggedIn');
    setIsLoggedIn(false);
  };

  return (
    <AuthContext.Provider
      value={{
        isLoggedIn: isLoggedIn,
        onLogout: logoutHandler,
        onLogin: loginHandler,
      }}
    >
      {props.children}
    </AuthContext.Provider>
  );
};

export default AuthContext;
```

```jsx
// register (global usage)
import { AuthContextProvider } from './store/auth-context';

ReactDOM.render(
  <AuthContextProvider>
    <App />
  </AuthContextProvider>,
  document.getElementById('root')
);
// usage in different component
import AuthContext from '../../store/auth-context';
const { onLogout, onLogin } = useContext(AuthContext);
```

### 3. Limitation

- React Context is not optimized for high frequency changes!
- Better tool: Redux
- React Context shouldn't be used to replace all component communication & props. </br>
  Component should still be configurable via props and short 'props chain' might not need any replacement.

## Rules of Hooks

1. Only call React Hooks in **React Functions**.
2. Only call React Hooks at the **Top Level**.
3. ALWAYS add everything you refer to inside of useEffect as a dependency!

## Others

Mystery Stuff: React.forwardRef, useImperativeHandle()

```jsx
const Input = React.forwardRef((props, ref) => {
  const inputRef = useRef();

  const activate = () => {
    inputRef.current.focus();
  };

  useImperativeHandle(ref, () => {
    return {
      focus: activate,
    };
  });

  return (
    <div
      className={`${classes.control} ${
        props.isValid === false ? classes.invalid : ''
      }`}
    >
      <label htmlFor={props.id}>{props.label}</label>
      <input
        ref={inputRef}
        type={props.type}
        id={props.id}
        value={props.value}
        onChange={props.onChange}
        onBlur={props.onBlur}
      />
    </div>
  );
});

export default Input;
```


Hi, I am Vincent