REACT / REDUX

Question 1

What is React? When and why would you use it?

Answer 1

React is a component based front-end framework that gives us the power to efficiently manipulate the DOM and create interactive User Interfaces. React, like other front end frameworks, allows the developer to manipulate the DOM with significantly less code while also creating a system that makes it easier to organize and manage various parts of the UI. React does this in a unique way by treating each UI element as a separate component that integrate the JavaScript, HTML, and CSS in one place in order to make the intended rendered element easier to manage and even reuse throughout the application.

Question 2

What is Babel?

Answer 2

Babel is a transpiler that will take any javascript code and convert it into an older version of the code in order to manage any problems that may arise with older browsers. It also has the powerful benefit of working with JSX code, making it an essential tool for building React apps which are all a combination of HTML and JavaScript (which the browser can’t read).

Question 3

What is JSX?

Answer 3

JSX is a JavaScript extension that combines JavaScript and HTML syntax in the same document. It is used in React as the main way to create components which are a bundle of the visual aspect (the HTML) and the logical (the JavaScript). JSX is not readable by any browser, so a transpiler like Babel will be necessary in order to view the page. Because of this, when using Babel, JSX code will be readable by nearly every browser.

Question 4

How is a Component created in React?

Answer 4

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen. Components have properties (immutable data that can be used in rendering the component) and state (mutable data that is managed by the component itself). A component may also have various effects (defined within the function) and hooks (usually defined outside the function and even in separate files).

Question 5

What are some difference between state and props?

Answer 5

the major difference is that props are immutable while state is mutable. Props are either defined by default or passed in by parent components, while state is defined and managed within the component.

Question 6

What does “downward data flow” refer to in React?

Answer 6

Downward data flow is the concept in React that data can only be passed from parent components to child components, not the other way around. This can make React apps a bit easier to comprehend and debug since there will always be a sort of “nested” direction of data flow.

Question 7

What is a controlled component?

Answer 7

a controlled component is any element whose state is controlled by the React state. For example, HTML form inputs are often maintaining their own state dependent on what a user inputs. In order to control this, we would need to set the value of these inputs to the state in React and update that value only when some setState function has been used to rerender the component. This is usually done with some sort of handleChange function that sets react state onChange (any time the input value changes).

Question 8

What is an uncontrolled component?

Answer 8

an uncontrolled component is one that stores changes in the HTML DOM instead of in Reacts virtual DOM. This usually means that React will set the original state with a defaultValue tag and use a “ref” in order to hold on to and utilize that data.

Question 9

What is the purpose of the key prop when rendering a list of components?

Answer 9

the key prop is crucial for react to know which components have actually been manipulated, especially in a list of components that are mostly or event completely the same. The key must be unique for each component in order to accomplish this. The key prop is used by React, but will not be usable as a prop for the developer or even seen by the final rendered DOM at all.

Question 10

Why is using an array index a poor choice for a key prop when rendering a list of components?

Answer 10

using the array index can be cause issues in the way React interacts with the components if the order of the list eventually changes for any reason.

Question 11

Describe useEffect. What use cases is it used for in React components?

Answer 11

useEffect is a useful hook in react that allows you to program in a side effect of an action that will run after the component is rendered. These effects will run after the first render and after every subsequent render unless defined by the second argument which is an array of state. This array of state is used to inform the effect to only run after one or more of those pieces of state has been updated. These can be useful for doing an initial AJAX request when the item first renders or for updating a separate piece of state when the first is changed (i.e. counters or toggles).

Question 12

What is the purpose of the React Router?

Answer 12

React Router gives the ability for our website to appear to work like a traditional website with multiple pages and url addresses, but it is actually a single page application. It provides functionality for the URL bar, bookmarks, and back/forward buttons.

Question 13

What is a single page application?

Answer 13

This is an app that serves all the HTML that the client sees from one static HTML page that is manipulated by the JS. This usually means that any routing in the app will be done on the client side and no actual server requests will be made to generate the page when changing routes.

Question 14

What are some differences between client side and server side routing?

Answer 14

With server-side routing, HTML is rendered by the server upon each HTTP request from the client. With client side routing, all routing and HTML rendering in the application is handled by the JavaScript on the client side and requests to the server tend to only return JSON instead of HTML.

Question 15

What are two ways of handling redirects with React Router? When would you use each?

Answer 15

with React Router, there is a Redirect component that simply re-routes the user to a chosen route and can be used in the Route components or in the return statement of another component. This is mostly useful when a user attempts to go to a route that is protected or does not exist. There is also a history object that we have access to with the useHistory hook in ReactRouter that will send the user to this new route and add it to the browser history ( -history.push("/redirect-route") -). This is more usefull as a final action inside of a callback function ( -i.e. when a form is submitted so the user can be redirected if the submit is successful -).

Question 16

What are two different ways to handle page-not-found user experiences using React Router?

Answer 16

• One way is using Switch to wrap all your routes and adding a NotFound component in a route listed last. Switch will search for the first route that matches the user inputed url, so if none are found, the NotFound component will be rendered ( -so long as the Route component wrapping the NotFound componenet does not have an exact keyword or any specification of a route -).
  
  • Another way would be to simply us a Redirect component when the user reaches a wrong path that sends the user somewhwere else ( -whether that be the 404 page or another desired route -).

Question 17

How do you grab URL parameters from within a component using React Router?

Answer 17

you can use the useParams() hook which grabs all the url params in an object of key value pairs.

Question 18

What is context in React? When would you use it?

Answer 18

context in React gives us the ability to pass props down to any nested component by defining them in a singular ancestral component and wrapping the first nested component(s) with a .Provider property on the context object created from useContext(). This is very useful when certain props need to be used by a multitude of components that may not be sibling components or are nested beyond the child component of the parent component that defines the props.

Question 19

Describe some differences between class-based components and function components in React.

Answer 19

• class-based components require more setup than their function counterparts because of their need to establish props and state in a constructor method (or as instance properties). Because class components utilize OOP, there is also a lot of work with this, meaning instance methods will need this binding to maintain the proper context.
  
  • Another major difference is the methods used to manage the component life cycle. Class-based components have a lot of different methods to manage each part of the component life cycle (componentDidMount, componentDidUpdate, componentWillUnmount, render, etc.) while function components handled most of this with a few simple hooks (namely useEffect which can manage mounting, updating and unmounting components in one function).

Question 20

What are some of the problems that hooks were designed to solve?

Answer 20

• Hooks initially solved a major problem with function Components which was that they had no way of managing state and were simply used for presentational purposes.
  
  • Another big problem hooks helped solve was the duplication of code within a component where a lot of similar logic was happening throughout the lifecycle of a component that had to be repeated in each different lifecycle function. Now, the hooks allow you to hook into the state in a way that allows you to manipulate state throughout the lifecycle from one central hook.
  • similarly, hooks allow for cross component usage so that logic can be stored in a single hook and used throughout the app.

Question 21

What is Redux? Why might you use it?

Answer 21

• Redux is a tool that allows for centralized state management throughout an application. Redux has the concept of a -“store” - that houses all of the state for the application and can be accessed and updated from almost anywhere.
  
  • This can be very useful, especially in React applications where it can be very challenging to pass state around the application without -“prop-drilling” - (passing state down through various child components to reach a deeply nested component) and manage state when state may live in various components throughout the application. While React now has some useful hooks for managing this without Redux, Redux is still widely used because of some other great features like the Redux developer tools.

Question 22

What are three features of the Redux developer tool in Chrome?

Answer 22

• Analyze every action and see how state changes
  
  • Move around in time to see how state changes
  • Record actions and play back later
  • see entire state tree

Question 23

What is a store (in Redux)?

Answer 23

a store is a Redux feature that acts as the centralized location for the state in an application. There are specific rules and methods for accessing and updating this state throughout the application, making it easier to manage state changes. The store is updated with a reducer that is trigger via an action.

Question 24

What is a reducer?

Answer 24

A reducer is a pure function that takes in the existing state and an action, updates the state as needed, and returns the new state. The action object will always have a key of “type” which will be used to dictate to the reducer what it should do to the state and what it will return.

Question 25

What is an action?

Answer 25

an action is an object that always contains a key of “type” and is passed in as an argument to a reducer function in order to determine what that reducer should do to the existing state in the Redux store. The action object could hold any number of other key-value pairs that may help the reducer alter the existing state. In practice, when there is data to be added or update, this will be passed to the action object as the value for the key, “payload” (i.e. action = {type: "UPDATE_STATE", payload: newStateData})

Question 26

What is an action creator?

Answer 26

an action creator is a function that returns an action object. Action creators can be used to abstract away code that isn’t necessarily related to the file in question (especially AJAX requests). These action creator functions can be kept in a separate file and imported when needed and called by a dispatch function that will retrieve the action and pass it into the reducer.

Question 27

How does data flow in a React/Redux application?

Answer 27

a component grabs data from the Redux store using useSelector, data can be dispatched to the store using actions and the useDispatch hook. The reducer will then update the store and trigger a re-render of any component that uses that piece of state.

Question 28

What is the purpose of the Provider component?

Answer 28

The Provider component wraps the outermost ancestor component that will need access to the Redux store. The provider will be passed the store as a prop and any component nested below it will be able to access the store with the useSelector hook.

Question 29

What is the purpose of the useSelector hook? What does it return?

Answer 29

The useSelector hook takes in a callback function with the current state as an argument. It will return the specified state from the store (i.e. grab list of items from state —> const items = useSelector(state => state.items))

Question 30

Describe the useDispatch hook. What do you use it for?

Answer 30

the useDispatch hook will return the dispatch function that can be used to dispatch an action that will update state in the Redux store. This is useful for giving access to dispatch only to components that explicitly need it.

Question 31

What is redux-thunk and why would you use it?

Answer 31

redux thunk is a piece of middleware that allows us to write action creators that return a function. This give us the ability to run asynchronous functions (like API calls) and call multiple dispatches in our action creator.

Question 32

What are propTypes?

Answer 32

propTypes are the specific data types of the props and can be used in conjunction with react components to validate props to see if they are the expected type. This can help prevent bugs that arise from props being passed down as the wrong type.

Question 33

Describe the useCallback hook. What is it used for?

Answer 33

he useCallback hook takes in a function and a dependency array and returns the same function to be used throughout the component. The function will not be redefined upon re-renders unless any of the values in the dependency array change. This can be useful for optimization since it prevents unnecessary redifining that could be causing unnecessary re-renders.

Question 34

Compare and contrast the useReducer hook with Redux (including react-redux). Why would you choose one over the other?

Answer 34

• the useReducer hook, in conjunction with React’s useContext hook allow for state to be created in a top level component and accessed or updated in any lower-level component. This sort of functionality is very similar to react-redux’s useSelector and useDispatch hook that allow for similar state management.
  
  • But, useReducer and useContext don’t actually create a centralized state store or the ability to combine reducers into a single rootReducer with a single dispatch function (which Redux does).
  • Redux also has added optimizations native to the library and a large list of middleware and added features (including the redux devtools) that do not come native in React.
  • Ultimately, useReducer (with useContext) does not completely replace Redux and react-redux, but could be a viable alternative for smaller or simpler applications that don’t need the extra features or optimization of Redux.