React, Redux
- What is an action creator?
An action creator is a function that returns an action.
What is an action?
An action is an object with a key of type or it is a function that can dispatch like in the case with redux-thunk. When an action is dispatched the reducer runs with the action on the second parameter which should change state.
What is an uncontrolled component?
An uncontrolled component is one where react it not aware of the state change. It is very uncommon to need to use an uncontrolled component, but it can happen in the event of 3rd party libraries and inputs for uploading files.
How is a Component created in React?
By writing a function that returns some JSX. The function is called whenever you write that component inside of JSX tags.
Describe some differences between class-based components and function components in React.
Class-based components use OOP to manage state, props, and the lifecycle of a component. Because they are based on OOP, you'll see the `this` keyword used extensively. You also need to be sure to bind any instance methods in the constructor, so that you don't lose the `this` context. There are several methods used to hook into the component lifecycle, including `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount`. In contrast, function components do not use OOP, instead favoring hooks to manage state and the component lifecycle. You don't need to reference `this` or worry about method binding, and one hook (`useEffect`) replaces the need for the lifecycle methods mentioned above.
What are some differences between client side and server side routing?
Client-side routing emphasizes DOM manipulation with JavaScript rather than going to a server to request HTML. There are fewer full-page loads with client-side routing, which can lead to an improved user experiencing. Transitioning between pages can also be done in more ways, since you don't need to reload the page with new HTML.
What is a reducer?
A reducer is a function that accepts a state and action as parameters and returns a new state based on that. This function also should be pure.
What is a store?
A store is the centralized place for Redux to manage state.
What is Babel?
A transpiler that can covert JSX which cannot be read by the browser into JS which can.
What is context in React? When would you use it?
Context is a way to pass data or functions across different components in a hierarchy without needing to use props. This can be particularly helpful if one component high up in a hierarchy needs to pass data to one or more components deeply nested in the hierarchy. There are three steps to using context. Step one is to create a context object with `React.createContext()`. The second is to include a `Provider` for thatcontext somewhere in your component tree. Lastly, any component inside of the `Provider` can subscribe to the context value with the `useContext` hook, which accepts the context object created in step 1. Any component that subscribes to a context value will automatically re-render if the context value changes.
What does "downward data flow" refer to in React?
Downward data flow is the idea that parent components pass data down to their children via props. In order to make data go the other way, we have to pass a function down from the parent that the child can then call with some information.
What is React? When and why would you use it?
Front end framework that allows us to build front end applications. React has reusable components that know how to render themselves and can be reused. React also has re-rendering when state changes which can make it easy to make single page applications.
How does data flow in a React/Redux application?
In general components should use data from Redux when they need to be connected to Redux. For example, in an application that does not use redux data will always flow down via props and flow up via callback methods with no side movement allowed. When Redux is connected it allows sibling components to access state without flowing up and down so with Redux the application may have less flow up and down but the data does flow in a similar way. In an application that uses Redux, you will likely still have simple presentational components that do not call `useSelector` and instead get all of the data from props passed into the component.
What is redux-thunk and why would you use it?
It allows actions to be function instead of just objects with a key of type. It is middleware that allows actions to be dispatched whenever you would like them to be instead of immediately. It also allows multiple actions to be dispatched.
What is the purpose of the `key` prop when rendering a list of components?
It allows react to very quickly identify which components are changed so that it knows which ones to re-render very quickly. Without this performance could take a hit since react would not be able to identify quickly which component is changed.
What is a single page application?
It is an app that re-renders content on the page based on navigation and not getting new html from a server that refreshed the page.
- What is the purpose of the React Router?
It is to do client-side routing. It is to trick a user into thinking there is new html being sent from a server and that they are actually changing html pages. In reality, client side routing will send one html file but will load different component based on the url.
What is JSX?
It is very much like writing HTML in JS although it isn't valid HTML or JS. It allows us to write React components very easily and then it is converted with Babel for the browser.
What is Redux? Why would you use it?
Redux is the idea of having shared state so that any part of your application can access and change state if setup to do so. You would use Redux whenever you need shared state. In the context of React you would use Redux when you have an application where state is kept up highly purely for the reason that a component needs it. For example, if you have a component hierarchy which is 5 levels deep and only the bottom left component and the bottom right component need state then you would have to maintain state all the way at level 1 and pass it down as well as pass down functions to change state to level 5. Redux would eliminate that problem. Redux is used when there is a ton of prop drilling just for the sake of having a child component have access to state. It also keeps components clearer in their purpose.
What are some difference between state and props?
State is mutable whereas props are not. When state is changed a component is re-rendered. Another difference is that state is not passed down to child components. The only way to pass information down to children is through props
Why is using an array index a poor choice for a `key` prop when rendering a list of components?
The 2 things that a key should be is stable and unique. An index would be unique but it would not be stable since the array can mutate and indices can shift around.
- What is the purpose of the `<Provider>` component?
The Provider component comes from react-redux and it wraps the App component. It is needed because it takes a prop of the redux store and gives other components access to that store via context. The Provider component makes it easier for react to work with Redux.
What are three features of the Redux developer tool in Chrome?
Viewing the state tree, seeing tests for reducers, skipping/jumping to other parts in state and much more!
How do you grab URL parameters from within a component using React Router?
With the `useParams` hook that you can import from `react-router-dom`.
- Describe the `useCallback` hook. What is it used for?
`useCallback` is a built in react hook. It accepts a callback and an array of dependencies and returns a new function. The function will only be recreated if any of the dependencies have changed. The new function can be used as a dependency for a useEffect without worrying about an infinite re-render loop.
- Describe the `useDispatch` hook. What do you use it for?
`useDispatch` is also a hook priovided by `react-redux`. `useDispatch` returns a dispatch function to the component. The dispatch function can be used to dispatch actions to the redux store. Often action creator functions are used to create and return the action that the dispatch function then sends to the redux store.
Describe `useEffect`. What use cases is it used for in React components?
`useEffect` is used to run code after a rendering happens. Most commonly this is used to do something after a render, or after the initial render. Examples could include communicating with an API, syncing information to local storage, or working with timers.
- Compare and contrast the `useReducer` hook with Redux (including react-redux). Why would you choose one over the other?
`useReducer` is a hook that is built into react. It allows the user to pass in a reducer function and initial state. `useReducer` returns the current state as well as a dispatch function. This is very similar to how react-redux works, however, `useReducer` doesn't provide a hook like useDispatch or useSelector. Additionally, useReducer doesn't have a Provider component like react-redux provides. Therefore, if you want to have access to the state in other nested components, you'll have to use the react context to pass dispatch and state around. Generally speaking, I would continue to use redux if the application is sufficiently complex. `useReducer` can be a good option is the complexity is limited to a few larger components that have lots of state in them. All of the state in that case can be combined to a single useReducer call.
What is the purpose of the `useSelector` hook? What does it return?
`useSelector` is a hook provided by the `react-redux` package. Given a react application that has access to a redux store via a `Provider` component, any child component of the provider can use the `useSelector` hook to return any data it wants from the redux store. `useSelector` takes a function as a parameter. The parameter to that callback function is the entire redux store. Whatever the function returns is the data that will be returned from the hook. Any time the redux store is updated, the callback function passed to `useSelector` will be invoked and if the return result is different then the component will rerender.
What are some of the problems that hooks were designed to solve?
One of the benefits of using hooks is the ability to write custom hooks that can be shared across components. This has the benefit of keeping our code DRY; instead of having common business logic duplicated across several components, we can keep that logic in a single custom hook that is then shared. There's also less boilerplate required to make a component stateful (we don't have to use the keyword `this` or method bind in the constructor).
What is a controlled component?
One that is controlled by react and that state is always controlled by react. For example, in an input field in a form when the input is text react should control the state of the input so that it can use it. There could be issues if react is not aware of the changes being made in the DOM when compared to it's virtual DOM
What are two different ways to handle page-not-found user experiences using React Router?
One way could be redirection to a page that does exist. Another could be to display a message on the screen saying that this page is not found by perhaps having a general `404` component.
- What are propTypes?
PropTypes provide light validation on the types of props in your components. If a prop is not of the same type specified in propTypes a warning will be raised.
What are two ways of handling redirects with React Router? When would you use each?
React Router has a component called `Redirect`. Since this is not server side redirection there isn't another GET request being made but instead just re-rendering content based on where the `to` prop is set to. Another way to redirect is through `history.push`. (We can get history with the `useHistory` hook.) This method will add to the stack the list of routes the user has gone to instead of replacing the last time like the `Redirect` component does.
