# Course Review Notes

## React

### Compare and Contrast Functional and Class Based Components

- Disclaimer: React Hooks exist so Functional components can have state now but in the context we are teaching them, they don't
- Functional
- "dumb" component/only used for presentation
- can't do state
- access props through `props`
- Class
- stateful component
- access props through `this.props`
- Needs to extend `React.Component`
- Has `constructor`
- Has `super`

### When do you need to use a key attribute in JSX

- When working with React Lists
- Keys help React identify which items have changed, are added or are removed. Keys should be given to the elements inside an array to give them a 'stable identity'
- [Visual Explanation](https://dev.to/jtonzing/the-significance-of-react-keys---a-visual-explanation--56l7)

### Controlled Components

#### Uncontrolled

A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it

In traditional HTML forms, the components such as `<input>` typically maintain their own state and update it based on user input. In other words, they will accept what we type and have the responsibility of remembering it, and in order to retrieve the values they remembered, you have to “pull” it when you need it. The latter usually happens during form submission. They can be classified under uncontrolled components.

#### Controlled

A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component.

[More Info](https://reactjs.org/docs/forms.html#controlled-components)

### What are a Components Lifecycle Methods

Every React component goes through stages

- Mounting – Birth of your component
- Update – Growth of your component
- Unmount – Death of your component

#### Lifecycle Components

- render()
- componentDidMount()
- componentDidMount() is called as soon as the component is mounted and ready. This is a good place to initiate API calls, if you need to load data from a remote endpoint.
- componentWillUnmount()
- Called just before the component is unmounted and destroyed. If there are any cleanup actions that you would need to do, this would be the right spot.

#### When do you (un)subscribe from from Redux Store?

- Subscribe in componentDidMount
- Unsubscribe in componentWillUnmount

## Redux

### What is an action creator?

An action creator is function that returns an action object/type.

### What is a thunk?

A thunk (in general programming) is a piece of code that is "unevaluated" which can be optionally evaluated if it turns out the result is going to be used. Sounds a lot like something we would do with our asynchronous calls. So, in Redux, we use thunks to delay the actions to dispatch. It's a function that takes in a function (our dispatch) to be executed after we grab data our data (Recall: Our dispatch takes in a specific action to be done).

export const getAllCandies = () => async (dispatch) => {
    const { data } = await axios.get('api/candies')
    dispatch(gotAllCandies(data))
}

### What happens to the store when an action gets dispatched?

The store's reducer will be called with the current getState() result and the given action synchronously. Its return value will be considered the next state. It will be returned from getState() from now on, and the change listeners will immediately be notified.

### What is immutability?

- State can not be modified after creation. We don't mutate state directly. Why? Race Conditions/Temporaral Coupling and other weird side effects.

const arr = [10, 20, 30, 40]

setTimeout(()=> {
    console.log('Muahahaha, I am accessing it first')
    arr.splice(0, 1)
    console.log('Arr after the 2 second timeout', arr)
}, 2000)

setTimeout(()=> {
    console.log('Nooooo, I am trying to access the first element')
    console.log('Arr after the 5 second timeout', arr)
    console.log('Answer should be 20: ', arr[0] * 2)
}, 5000)

## JavaScript

### What is the signature of `Array.prototype.map`

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

`const map1 = array1.map(x => x * 2)`

### What is the difference between `map` and `forEach`?

The forEach() method executes a provided function once for each array element.

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

const array1 = ['a', 'b', 'c']

array1.forEach(element => console.log(element))

### What is Closure?

Closure is the ability of a function to "remember" its lexical scope even though that function is run outside that lexical scope?

const outer () => {
    let counter = 0
    const addTwo () {
        return counter += 2
    }
    return addTwo
}

const newInstance = outer()

### What is `this`? When does it change?

`this` refers to what object it belongs to. Every javascript function while executing has a reference to its current execution context, called this. Execution context means "here is how the function is called". To determine `this` for any function, take a look at its call site

Types of context binding and call site
- Default binding: func()
- Implicit Binding: obj.func()
- Explicit Binding: func.call(obj)
- 'new' binding: new func

Precedence of `this` keyword bindings
- First it checks whether the function is called with new keyword.
- Second it checks whether the function is called with call or apply method means explicit binding.
- Third it checks if the function called via context object (implicit binding).
- Default global object (undefined in case of strict mode).

[You Don't Know JS](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/objects-classes/ch2.md)