All the code has been taken from a youtube channel called 'Codevolution' playlist

I do not own or take credit for it.

• npx is npm package runner, so that packages can be run without even installing them
• Create app by below command:

npx create-react-app your-app-name

• Stateless

function welcome(props){
    return <h1> Hello, {props.name}</h1>;
}

• Statefull Class

class Welcome extends React.Component{
    render(){
        return <h1>Hello, {this.props.name}</h1>;
    }
}

• Simple functions
• Use it as much as possible
• Absence of this keyword
• Solution without using state
• Mainly responsible for the UI
• Stateless/ Dumb/ Presentational

• More feature rich
• Maintain their own private data - state
• Complex UI logic
• Provide lifecycle hooks
• Stateful/ Smart/ Container

• props get passed to the component
• Function parameters
• props are immutable (readonly)
  • props - Functional Components
  • this.props - Class Components

• state is managed within the component
• variables declared in the function body
• state can be changed
  • useState Hook - Functional Components
  • this.state - Class Components

1. using .bind(this), every update to the state causes rerender which will create new event handler, causes performance issue, so don't use this approach
2. onClick={() => this.clickHandler()}, this also has performance issue
3. Best approach is binding inside constructor

When to use?

• List doesn't have a unique id
• List is static and doesn't change
• List will never be reordered or filtered

Regular Component:

• Doesn't implements shouldComponentUpdate so always returns true.

Pure Components:

• Implements shouldComponentUpdate by shallow comparison on props and state of component
• So prevents unnecessary re-rendering

Note: Shallow comparison eg.

varA==varB //is true if both have same value and are of same type
objA==objB //is true if both reference the exact same object

• Render children into a DOM node that exists outside the DOM hierarchy of the parent component

• Doesn't catch error inside event handlers (because they don't happen during rendering)
• Use try catch in event handler

• A pattern where a function takes a component as an argument and returns a new component

• Props get passed only to HOC not to the component which is wrapped

• Share code between react components using a prop whose value is a function

• Pass data through component tree without having to pass props at every level

• Use React features without class eg. State of component
• Hooks don't work in class

• No need to know how this 'keyword' works
• No need to remember bind event handlers in class components
• HOC and render props helps to reuse stateful component logic but code is harder to follow
• Data fetching and subscribing to events related code is organised in one place

• Call only at top level, not in loops, conditions or nested functions
• Call only from React functions, not js function

• doesn't automatically merge objects unlike setState
• returns an array with 2 elements, current value of state and state setter function
• if new state value depends on previous then pass a function to setter function

• runs after every render of the component (so will run on componentDidMount and componentDidUpdate)
• for componentUnmount write the code in return statement of useEffect

• Pass data in component tree without passing props at every level

• for state management
• useState is built using useReducer

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

• React.memo has nothing to do with hook, used to check whether value has changed
• Issue: React.memo thinks that parameter changed since the prop is a function which is not the same after rerender
• so use useCallback, it will return a memoized version of callback function that only changes if one of the dependencies has changed

• To prevent unnecessary call of functions

• Access DOM nodes directly
• can also be used to store immutable value

• a js function which starts with use
• can call other hook if needed
• share logic, alternative to HOC, render props