React

What does combineReducers do?

It fuses multiple different reducers into a single reducing function you can pass to createStore.

What does mapDispatchToProps do?

It maps dispatch actions to property names so you can call them as props.

What does React.Fragment do and how can it improve performance?

It returns just what's in-between it and doesn't use an unnecessary div. In the grand-scheme it adds up and the DOM isn't full of useless divs. The difference of <> and <div> is <> doesn't get added to DOM, div does even if does nothing more than just wrap the important elements.

What does useEffect do?

It tells React that your functional component needs to do something after render. For example, adding to a counter. This is why if you see useEffect, 9/10 useState's being used aswell.

What are Synthetic Events?

It's React's automatic wrapping of Native Events to ensure that the same functionality across browsers while using the same methods. When ever you handle events in React you're using a synthetic event ("e" is the common name)

What are some limitations to React?

JSX can make the coding complex. It will have a steep learning curve for the beginners The amount of different libraries react devs use thanks to NPM

Give me specifics about the lifecycles, in the order they happen.

Mounting: constructor() render() componentDidMount() Updating: render() componentDidUpdate() Unmounting: componentWillUnmount()

If you want to style the Link component, use what variation?

Navlink

Inline styling is a simple quick way to style in react, how is it done?

Placing regular CSS values inside of an object. <h1 style={{color: "red"}}>Hello Style!</h1>

What is prop drilling?

Prop Drilling is passing data from component to component, usually to get data to deeply nested components. This becomes a problem as other components will contain data that they don't need.

What are props?

Props are data that's passed down to a component.

If you have multiple reducers, what do you use to unify them?

combineReducers()

What has to be installed in order for you to make react projects?

create-react-app (run npx create-react-app [NAME])

mapStateToProps

method used to map data from the store to props on the component.

redux doesn't come with react, so what do you have to install to use it inside your react apps?

npm install react-redux

Server Side Rendering

server renders the UI on the backend and then sends the rendered data to the client

What function do you use to update state?

this.setState(updater, callback)

You can use the which operator to conditionally render a React component?

&&

How to pass data between components?

- For 1-1 parent to child, use props. - For child updating parent state, use a function/callback. - For 1-many parent-children, use Contexts.

In react there are 2 types of components:

- Functional/Stateless - Class/Stateful

What kind of things does Strict Mode check for?

- Identifying components with unsafe lifecycles - Warning about legacy string ref - Warnings of depreciated findDOMNode usage - Detecting unexpected side effects

What is the lifecycle of react components?

- Mounting - Updating - Unmounting

Reducers must always follow some specific rules....

- Only calculate the new state value based on old state and action arguments. - They are not allowed to modify the existing state. Instead make immutable updates (by copying state and making changes that)

What are portals and modals?

- Portals are how you render children into a DOM node. - The modal is the DOM node itself.

Name some ways to Optimize React

- React.Lazy (lazy loading) - React.memo

What is StrictMode?

A HOC that doesn't render any visible UI and activates checks and warnings for its descendants.

Next.js

A Server Side Rendering package that you use for react.

What is a Component?

A component is a piece of the user interface. Components together build the entire UI.

What is React.memo?

A function that creates a HOC that won't re-render if the same props are passed. Use this only for funct. as it only checks props for changes.

Render in react?

A function that displays the contents of whatever is inside of it.

What is a reducer?

A function that receives the current state and an action object, decides how to update the state and returns the new state.

What is a Higher order component?

A higher-order component (HOC) is a function that takes a component and returns a new component, with new capabilities. React.memo, and Redux connect are examples.

What is useContext?

A hook that allows a component to access the Context that's been passed to the component.

what is getDerivedStateFromProps?

A lifecycle method that takes props and state as arguments, and returns an object with changes to the state.

what is the constructor(props)?

A method that's called during creation and before the component is mounted. You can also initialize state in here from props.

What is a pure component?

A pure component is a comp. that won't re-render for the same props and states as before. It implements shouldComponentUpdate for you.

What is a reducer in redux?

A reducer is an object that receives an action obj and decides how to change state based on the action

Refs are...

A reference to a DOM node/element. With refs you can directly change an element

What is redux?

A state management library that houses data for the entire application.

How does snapshot testing work?

A typical snapshot test case renders a UI component, takes a snapshot, then compares it to a reference snapshot file stored alongside the test.

What is the Virtual DOM?

A virtual DOM is a lightweight representation of the real DOM. It makes React fast at updating the page.

What is useReducer?

Allowing you to access the Redux state inside the component.

what is a redux action?

An action in redux is a plain javascript object that contains information on what just happened.

Redux persist is...?

Basically the redux version of localStorage, it makes the redux store last after refresh.

How you make Redux state accessible throughout the entire app?

By first creating a store from a reducer (multiple reducers use combineReducers) and then using Providers passing in the store.

How do listen in on every single action call, state change, etc. in Redux?

By using Subscriptions. It will be called any time an action is dispatched.

What is the modern way of lazy loading in React?

By using and importing "Suspense" and "lazy" from react

What's a way to enact Code Splitting in React?

By using lazy loading. (Also suspense components for fallback UIs)

How do you update store in Redux?

By using the dispatch() function. It takes an action object as an argument so these 2 statements are identical: - store.dispatch(actionCreator()); - store.dispatch({ type: 'LOGIN' });

What are CSS Modules

CSS files that are scoped to the JSX file that they were imported to, this prevents naming conflicts.

What do you use lastly in Redux to make the redux state available to all components in the app?

Create a Redux Store, use the Provider component from 'react-redux' to pass the store you just made.

What are Error Boundaries?

EB's are components that: - catch errors anywhere in the component tree - provide fallback UI, components, views etc. incase of a failure (if needed).

What is Enzyme for?

Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output

React is a bidirectional library

False. It's unidirectional.

What are keys and why do you need them?

The key is an ID to a comp. so when it's time to change, react can do it easily. React gets each component by key and compares changes, if there are then update.

What is ReactDOM?

The package that's the bridge between the DOM and react. It provides functions to manipulate the DOM in a react fashion.

What is [NAME] in npx create-react-app [NAME]

The project's name

mapDispatchToProps

This function takes a set of action creators and makes them "dispatchable". It then passes the object to components as a prop.

What is shouldComponentUpdate?

This is a lifecycle hook that details on what events react should rerender/update.

Hooks are functions that let you use React state and lifecycle features from function components

True

React.memo is basically the functional comp. version of PureComponent

True

Whenever state changes react triggers a re-render

True

setState doesn't update immediately

True

Does useEffect run on every render?

True.

Why should you use a context in React?

Use a Context/React.createContext if you want to make a prop available across all components in a tree. No Context you'd be going A->B->C->D, w/ Context you can go A->D

What is the only way to change the state of the redux store?

Using store.dispatch()

What is a redux action?

a plain JavaScript object that has a type field. It has 2 props: type and payload. An action describes something that happened in the application.

What is flux?

The architecture that Facebook uses to develop it's applications. Flux applications have three major roles: - Dispatcher - Stores - Views (React components) It has a Uni-directional flow of data as well.

the react hook useEffect combines which lifecycles?

- componentDIdMount - componentDidUpdate

What are some important hooks in React

- useState - useEffect - useContext - useMemo

what hook can you use to gather url properties?

- withRouter - or this.props.match.url

Why should we pass a function to setState()?

Because setState() is an asynchronous operation, state may not change immediately after setState() is called. So you pass the updater function and/or the end callback both of which are garenteed to fire after the state updates.

What do you use to pass down state to ALL components in the application?

<Provider store={your store}>

What is reconciliation in react?

Reconciliation refers to how React updates the DOM. When a component's state changes, React decides whether to update the DOM by comparing it with the Virtual DOM. If there's an change, it'll update the DOM.

Redux vs Flux

Redux is a library, Flux is an architecture. Redux only has a single-store, Flux can have multiple stores Uses the concept of reducer Uses the concept of the dispatcher

What does children do in React?

Returns/refers to the elements that are descendants of the element in question.

What are Snapshots in React?

Snapshot tests make sure your UI doesn't change unwanted. A example is if someone new tries to change a Comp. he shouldn't be, then the snapshot won't match and it'll fail

A JavaScript error in a part of the UI shouldn't break the whole app. To address this, React has...

The Error Boundary Component

how do you combine reducers to create a singular one?

use the combinedReducers function.

what is the hook that allows you to create a state inside a functional component?

useState(state, statechanger)