Please enable JavaScript.

Coggle requires JavaScript to display documents.

React - Coggle Diagram

- - - - to avoid onkeychange and call multiple time :red_flag:
        
        useEffect(()=>{
        const identifier= setTimeout(()=>{.......,500)};
        return()=>{console.log('CLEANUP')
        clearTimeout(indentifier)}
        },[dependency]);
    - - useEffect(() => {
        getSecretWord(setSecretWord);
        }, [])
        [] is empty array
  - - - class state property functional
        
        need repeated code in lifecycle methods
        
        re-use code via higher-order-components (HOC), which add complexity
        
        use this, which is difficult to understand and track
    - - component lifecycle functionality
        
        no HOC needed
        
        more simple :<3:
        
        easier to re-use code and separate concerns for lifecyclr events
        
        no need for this
  - - - useState
      - useEffect
      - useContext
    - - useReducer
        
        handle multiple state and update single key
        
        const [state, dispatchFn] = useReducer(reducerFn, initialState, initFn);
        
        const reducerFn =(state, action)=>
        {
        if (action.type===...){...
        return {....}
        }
        return {...,..}
        
        restructure
        
        const {isValid : emailIsValid}=emailState
        *emailState may have more than 1 value, alians the emailIsValid=emailState.isValid :red_flag:
        it work on Object
      - React library provides us two built-in hooks to optimize the performance of our app: useMemo & useCallback.
        
        useMemo
        
        gives you referential equality between renders for values.
        
        Only use useMemo whenver you’re trying to prevent re-running expensive functions, that run a lot of time, or using a lot of resources. Why? Because useMemo keeps in memory the results of the functions execusion, and it might potentially grow big and ironically harm the performance of your App.
        
        keeps a function from being executed again if it didn’t receive a set of parameters that were previously used. It returns the results of a function. Use it when you want to prevent some heavy or costly operations from being called on each render.
        
        useCallback
        
        gives you referential equality between renders for functions
        
        keep a function from being re-created again, based on a list of dependencies. It returns the function itself. Use it when you want to propagate it to child components, and prevent from a costly function from re-running.
        
        Functional components have a problem
        
        Their combination with hooks allows for much more code reusability and flexibility than Class components. However, they do have one problem: A functional component is the same as the render function we used to have in class components. It’s a function that is being re-run on any prop/state change.
        
        It means that:
        If a function is called inside the component, it will be re-evaluated, again and again, on every re-render.
        If a function is created inside the component is passed to a child component, it will be recreated, meaning the pointer will change, causing the child to re-render or call the function unnecessarily (depending on the situation).
      - useRef
      - useImperativeHandle
      - useLayoutEffect
      - useDebugValue
    - - useEffect
        It's the alternative for the class component lifecycle methods componentDidMount, componentWillUnmount, componentDidUpdate, etc. You can also use it to create a side effect when dependencies change, i.e. "If some variable changes, do this".
        useCallback
        On every render, everything that's inside a functional component will run again. If a child component has a dependency on a function from the parent component, the child will re-render every time the parent re-renders even if that function "doesn't change" (the reference changes, but what the function does won't).
        It's used for optimization by avoiding unnecessary renders from the child, making the function change the reference only when dependencies change. You should use it when a function is a dependency of a side effect e.g. useEffect.
        useMemo
        It will run on every render, but with cached values. It will only use new values when certain dependencies change. It's used for optimization when you have expensive computations.
- - - - let expensesContent = <p>No expenses found.</p>;
        if (filteredExpenses.length > 0) {
        expensesContent = filteredExpenses.map((expense) => (
        <ExpenseItem key={expense.id} title={expense.title} amount={expense.amount} date={expense.date} />
        ));
        }
        return (
        <div>
        <Card className='expenses'>
        <ExpensesFilter selected={filteredYear} onChangeFilter={filterChangeHandler} />
        {expensesContent}
        </Card>
        </div>
        );
    - - <Card className='expenses'>
        <ExpensesFilter selected={filteredYear} onChangeFilter={filterChangeHandler} />
        {filteredExpenses.length===0 && <p>No expenses found.</p>
        {filteredExpenses.length > 0 &&
        expensesContent = filteredExpenses.map((expense) => (
        <ExpenseItem key={expense.id} title={expense.title} amount={expense.amount} date={expense.date} />))}
        </Card>
        </div>
        );
    - - {filteredExpenses.length===0 ?(<p>No expenses found.</p>) :(expensesContent = filteredExpenses.map((expense) => (
        <ExpenseItem key={expense.id} title={expense.title} amount={expense.amount} date={expense.date} />
        ))) }
- - - - this.setState({
        abc: xyz
        },
        () => console.log(this.state.abc),
        )
  - - - componentDidMount()
        
        componentDidMount() {
        this.timerID = setInterval(
        () => this.tick(),
        1000
        );
        }
      - componentWillUnmount()
        
        componentWillUnmount() {
        clearInterval(this.timerID);
        }
      - state
        
        class Clock extends React.Component {
        constructor(props) {
        super(props);
        this.state = {date: new Date()};
        }
        componentDidMount() {
        this.timerID = setInterval(
        () => this.tick(),
        1000
        );
        }
        componentWillUnmount() {
        clearInterval(this.timerID);
        }
        tick() {
        this.setState({
        date: new Date()
        });
        }
        render() {
        return (
        <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
        </div>
        );
        }
        }
        ReactDOM.render(
        <Clock />,
        document.getElementById('root')
        );
    - - multiple state
        
        const [enteredTitle, setEnteredTitle] = useState('');
        const [enteredAmount, setEnteredAmount] = useState('');
        const [enteredDate, setEnteredDate] = useState('');
        const titleChangeHandler = (event) => {
        setEnteredTitle(event.target.value);
        };
        const amountChangeHandler = (event) => {
        setEnteredAmount(event.target.value);
        };
        const dateChangeHandler = (event) => {
        setEnteredDate(event.target.value);
        };
        <div className='new-expense__control'>
        <label>Title</label>
        <input type='text' onChange={titleChangeHandler} />
        </div>
      - single state
        
        const [userInput, setUserInput] = useState({
        enteredTitle: '',
        enteredAmount: '',
        enteredDate: '',
        });
        const titleChangeHandler = (event) => {
        setUserInput({
        ...userInput,
        enteredTitle: event.target.value,
        });
        };
        
        create multiple snapshot
        
        const titleChangeHandler = (event) => {
        setUserInput((prevState) => {
        return { ...prevState, enteredTitle: event.target.value };
        });
        };
        
        only one snapshop
        
        safest way
- - - - return(
        <div><h2> Hi there</h2><p>This does not work</p>
        </div>
        )
        
        can end up <div> soup which a lot of div
        
        use helper wrapper
        
        const Wrapper = props=>{
        return props.children;}
        export default Wrapper;
        
        return(<Wrapper>
        <h2> Hi there</h2><p>This work</p>
        </Wrapper>
        )
        
        return(<React.Fragment>
        <h2> Hi there</h2><p>This work</p>
        </Fragment>
        )
        
        return(
        <>
        <h2> Hi there</h2><p>This work</p>
        </>
        )
        
        portal
        
        {ReactDOM.createPortal()}
        
        better UI render
- - - - better tools for more sophisticated apps
        
        optimization for high frequency update
        
        rich ecosystem for developers
        
        tools for debugging
        
        middleware for automatic code upon any action
      - Redux’s actions are dispatched synchronously, which is a problem for any non-trivial app that needs to communicate with an external API or perform side effects.
        
        two very popular middleware libraries that allow for side effects and asynchronous actions: Redux Thunk and Redux Saga
        
        Redux Thunk
        
        Redux Thunk is middleware that allows you to return functions, rather than just actions, within Redux. This allows for delayed actions, including working with promises.
        
        sample 2
        
        sample 1
        
        import React from 'react';
        import ReactDOM from 'react-dom';
        import { Provider } from 'react-redux';
        import { createStore, applyMiddleware } from 'redux';
        import thunk from 'redux-thunk';
        import './index.css';
        import rootReducer from './reducers';
        import App from './App';
        import * as serviceWorker from './serviceWorker';
        // use applyMiddleware to add the thunk middleware to the store
        const store = createStore(rootReducer, applyMiddleware(thunk));
        ReactDOM.render(
        <Provider store={store}>
        <App />
        </Provider>,
        document.getElementById('root')
        );
        
        The thunks’ logic is all contained inside of the function
        
        The thunk can then be used to delay the dispatch of an action until the fulfillment of an asynchronous line of code (e.g., an axios request to receive data).
        
        Redux Saga
        
        thread can be started, paused and cancelled from the main application with normal Redux actions
        
        is similar to a separate thread in your application that’s solely responsible for side effects.
        
        the iterator’s next method is invoked, the generator function’s body is executed up until the first yield
        
        The iterator’s next method returns an object with a value property containing the yielded value and a done boolean property, which indicates whether the generator has yielded its last value.
        
        You can use the yield keyword to pause the function from inside of itself. Note that nothing can pause the generator from the outside. However, once paused the generator cannot restart itself. Only an external control can be used to restart the generator function.
        
        Pro (using saga):
        
        Testability. It's very easy to test sagas as call() returns a pure object. Testing thunks normally requires you to include a mockStore inside your test.
        
        redux-saga comes with lots of useful helper functions about tasks. It seems to me that the concept of saga is to create some kind of background worker/thread for your app, which act as a missing piece in react redux architecture(actionCreators and reducers must be pure functions.) Which leads to next point.
        
        Sagas offer independent place to handle all side effects. It is usually easier to modify and manage than thunk actions in my experience.
        
        Con:
        
        Generator syntax.
        
        Lots of concepts to learn.
        
        Redux Saga leverages an ES6 feature called Generators, allowing us to write asynchronous code that looks synchronous, and is very easy to test. In the saga, we can test our asynchronous flows easily and our actions stay pure
        
        The benefit of Redux-Saga in comparison to Redux-Thunk is that you can more easily test your asynchronous data flow. :<3:
        
        Thunk to Saga
        
        Thunk allows Promises" to deal with them, Saga uses Generators. Thunk is simple to use and Promises are familiar to many developers, Saga/Generators are more powerful but you will need to learn them. When Promises are just good enough, so is Thunk, when you deal with more complex cases on a regular basis, Saga gives you better tools. :pencil2:
      - combineReducers
        
        As your app grows more complex, you'll want to split your reducing function into separate functions, each managing independent parts of the state.
        
        The combineReducers helper function turns an object whose values are different reducing functions into a single reducing function you can pass to createStore.
        
        Creates a Redux store that holds the complete state tree of your app. There should only be a single store in your app.
        
        The resulting reducer calls every child reducer, and gathers their results into a single state object. The state produced by combineReducers() namespaces the states of each reducer under their keys as passed to combineReducers()
        
        import { createStore, applyMiddleware } from 'redux';
        import rootReducer from './reducers';'-->Create a FOLDER first
        export default createStore(rootReducer, {});
        as configureStore.js
        
        index.js
        import React from 'react';
        import ReactDOM from 'react-dom';
        import { Provider } from 'react-redux';
        import './index.css';
        import App from './App';
        import store from './configureStore';
        import reportWebVitals from './reportWebVitals';
        ReactDOM.render(
        <React.StrictMode>
        <Provider store={store}>
        <App />
        </Provider>
        </React.StrictMode>,
        document.getElementById('root')
        );
      - React-Redux using Hooks
        
        useSelector()
        
        Allows you to extract data from the Redux store state, using a selector function.
        
        const result: any = useSelector(selector: Function, equalityFn?: Function)
        
        The selector function should be pure since it is potentially executed multiple times and at arbitrary points in time.
        
        a pure function is a function that has the following properties:[1][2]
        1 The function return values are identical for identical arguments (no variation with local static variables, non-local variables, mutable reference arguments or input streams).
        2 The function application has no side effects (no mutation of local static variables, non-local variables, mutable reference arguments or input/output streams).
        Thus a pure function is a computational analogue of a mathematical function. Some authors, particularly from the imperative language community, use the term "pure" for all functions that just have the above property 2
        
        The selector will be called with the entire Redux store state as its only argument. The selector will be run whenever the function component renders (unless its reference hasn't changed since a previous render of the component so that a cached result can be returned by the hook without re-running the selector).
        
        useSelector() will also subscribe to the Redux store, and run your selector whenever an action is dispatched.
        
        The selector may return any value as a result, not just an object. The return value of the selector will be used as the return value of the useSelector() hook.
        
        When an action is dispatched, useSelector() will do a reference comparison of the previous selector result value and the current result value. If they are different, the component will be forced to re-render. If they are the same, the component will not re-render.
        
        useSelector() uses strict === reference equality checks by default, not shallow equality
        
        memoizing selectors :!:
        
        import { createSelector } from 'reselect'
        
        no need to use class-based component and connect :pencil2:
        
        useDispatch
        
        const dispatch = useDispatch()
        
        This hook returns a reference to the dispatch function from the Redux store.
        
        Provider
        
        will serve as the component bridge between the Redux store and our entire app
        
        ReactDOM.render(
        <Provider store={store}>
        <App />
        </Provider>,
        document.getElementById('root')
        )
        
        store
        
        const store = createStore(rootReducer)
        
        Custom context
        
        The <Provider> component allows you to specify an alternate context via the context prop. This is useful if you're building a complex reusable component, and you don't want your store to collide with any Redux store your consumers' applications might use.
        
        import React from 'react'
        import {
        Provider,
        createStoreHook,
        createDispatchHook,
        createSelectorHook
        } from 'react-redux'
        const MyContext = React.createContext(null)
        // Export your custom hooks if you wish to use them in other files.
        export const useStore = createStoreHook(MyContext)
        export const useDispatch = createDispatchHook(MyContext)
        export const useSelector = createSelectorHook(MyContext)
        const myStore = createStore(rootReducer)
        export function MyProvider({ children }) {
        return (
        <Provider context={MyContext} store={myStore}>
        {children}
        </Provider>
        )
        }
        
        Basic Sample
      - store
        
        Tips#
        Don't create more than one store in an application! Instead, use combineReducers to create a single root reducer out of many.
        Redux state is normally plain JS objects and arrays.
        If your state is a plain object, make sure you never mutate it! For example, instead of returning something like Object.assign(state, newData) from your reducers, return Object.assign({}, state, newData). This way you don't override the previous state. You can also write return { ...state, ...newData } if you enable the object spread operator proposal.
        For universal apps that run on the server, create a store instance with every request so that they are isolated. Dispatch a few data fetching actions to a store instance and wait for them to complete before rendering the app on the server.
        When a store is created, Redux dispatches a dummy action to your reducer to populate the store with the initial state. You are not meant to handle the dummy action directly. Just remember that your reducer should return some kind of initial state if the state given to it as the first argument is undefined, and you're all set.
        To apply multiple store enhancers, you may use compose().
        
        const store = createStore(rootReducer)
        
        createStore(reducer, [preloadedState], [enhancer]
        
        Arguments
        
        reducer (Function): A reducing function that returns the next state tree, given the current state tree and an action to handle.
        
        [preloadedState] (any): The initial state. You may optionally specify it to hydrate the state from the server in universal apps, or to restore a previously serialized user session. If you produced reducer with combineReducers, this must be a plain object with the same shape as the keys passed to it. Otherwise, you are free to pass anything that your reducer can understand.
        
        [enhancer] (Function): The store enhancer. You may optionally specify it to enhance the store with third-party capabilities such as middleware, time travel, persistence, etc. The only store enhancer that ships with Redux is applyMiddleware().
        
        Returns
        
        (Store): An object that holds the complete state of your app. The only way to change its state is by dispatching actions. You may also subscribe to the changes to its state to update the UI.
      - Redux is a pattern and library for managing and updating application state, using events called "actions". It serves as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion.
        
        npx create-react-app my-app --template redux
        
        Redux is a predictable state container for JavaScript apps.
        It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.
        
        You can use Redux together with React, or with any other view library. It is tiny (2kB, including dependencies), but has a large ecosystem of addons available.
        
        concept
        
        1 End user does an action
        
        2 Dev calls dispatch with action type (reducer)
        
        3 Hook determines the necessary changes with case or switch
        
        4 Hook calls dev's code for further changes 👈 this is the inversion of control part
        
        5 Hook makes the state changes
        
        fundamental
        
        action
        
        reducer
        
        Understanding How Reducers are Used in Redux
        
        middleware
        
        import { createStore, applyMiddleware } from 'redux';
        
        Provider
        
        store
    - - works great on simple apps
      - less complicated than redux
      - less powerful/fewer tools
      - Context provides a way to pass data through the component tree without having to pass props down manually at every level.
      - In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.
      - Note
        
        You shouldn't be reaching for context to solve every state sharing problem that crosses your desk.
        
        Context does NOT have to be global to the whole app, but can be applied to one part of your tree
        
        You can (and probably should) have multiple logically separated contexts in your app.
      - Learn React Context in 5 Minutes
        
        Context caveats
        
        Don't use Context to avoid drilling props down just one or two layers. Context is great for managing state which is needed by large portions of an application. However, prop drilling is faster if you are just passing info down a couple of layers.
        
        Avoid using Context to save state that should be kept locally. So if you need to save a user's form inputs, for example, use local state and not Context.
        
        Always wrap the Provider around the lowest possible common parent in the tree - not the app's highest-level component. No need for overkill.
        
        Lastly, if you pass an object as your value prop, monitor performance and refactor as necessary. This probably won't be needed unless a drop in performance is noticeable.
      - concept
        
        1 create context
        
        const guessedWordsContext = React.createContext();
        
        2 create hook
        
        export function useGuessedWords() {
        // useContext is a hook that returns the context value
        // In this case, the context value is an [value, setter] array for the context state
        // useContext also subscribes to changes, and will update any time the context value updates
        // we've memoized this so that it will only update when the guessedWords value updates
        const context = React.useContext(guessedWordsContext)
        // throw an error if the context doesn't exist -- means we aren't in a provider
        if (!context) {
        throw new Error('useGuessedWords must be used within a GuessedWordsProvider')
        }
        // otherwise return the context
        return context
        }
        
        3 create provider
        
        /**
        
        function GuessedWordsProvider
        
        param {object} props - props to pass through from declared component
        
        returns {JSX.Element} Provider component
        */
        export function GuessedWordsProvider(props) {
        // create state that will be used within the provider
        // initial state value is false
        const [guessedWords, setGuessedWords] = React.useState([])
        
        // value for the context provider will be array of [value, setter] for guessedWords state
        // useMemo just ensures that the provider value will only update when guessedWords updates
        // No need to test this -- React tests useMemo for us!
        const value = React.useMemo(() => [guessedWords, setGuessedWords], [guessedWords])
        
        // Return a Provider component with the [value, setter] array as the value, passing through the props
        return <guessedWordsContext.Provider value={value} {...props} />
        }
- - - - const FunctionalComponent = () => {
        return <h1>Hello, world</h1>;
        };
    - - 1.Functional component are much easier to read and test because they are plain JavaScript functions without state or lifecycle-hooks
      - 2.It has less code which makes it more readable
      - 3.It will get easier to separate container and presentational components because you need to think more about your component’s state if you don’t have access to setState() in your component
  - - - class ClassComponent extends Component {
        render() {
        return <h1>Hello, world</h1>;
        }}
    - - 1 mounting()
      - 2 Updating()
      - 3 UnMounting()
      - 4 Error Handeling