React

Question 1

What is React?

Answer 1

React is a JavaScript library used to build user interfaces (UI components).

Question 2

What is Redux?

Answer 2

Redux is a centralized state management tool. Using this single global object (called Store), allows any component to access state data without having to pass props through components that don’t need to access the data.

Question 3

How does Redux work?

Answer 3

Redux uses the Store, Reducers, and Actions. The Store is the central location that contains the application’s state. Reducers are functions that take 2 parameters: current state and an action that then returns the current state of action. Actions are JavaScript objects that contain two properties: type and payload. The actions are “dispatched” or used as arguments by the Store’s dispatch API method. When the action is called it will run the reducer function, the state will be updated based on the action type.

Question 4

Why did you choose React over Angular, Vue, or any other framework?

Answer 4

I chose React for a few reasons. First is it’s ability to break the UI down into reusable components. Next is the fact that it uses the virtual DOM to increase performance. Another reason is the availability of support, libraries, and its wide-spread use in the development community.

Question 5

What are some major features of React?

Answer 5

JSX which is a syntax extension of JavaScript that allows you to embed HTML into JavaScript code.
The Virtual DOM is a copy of the DOM that is kept in memory and React only updates changed objects instead of all objects which makes the app faster.
Another is One-way Data Binding which is when the developer nests child components within parent components which makes it easier to find problems and debug errors.

Question 6

What’s the difference between state and props

Answer 6

State is data that is internally controlled by the component and props are variables that are passed into from and controlled by a parent component.

Question 7

What is lifting state up and why do we do it?

Answer 7

Lifting state up is the process of sharing state by moving it up to the closest common “ancestor” of the components that need it. We do this when multiple components need to share the same changing data.

Question 8

Why do we set a key property when we map over an array in React?

Answer 8

The key helps React identify which items have changed, are added, or are removed. Keys need to be unique. Although it can be used, an index should not be used as the index of an item can change causing errors later.

Question 9

What is redux-thunk?

Answer 9

Redux-thunk is a middleware that allows you to write action creators that return a function instead of an action. It can then be used to delay the dispatch of an action or to dispatch only if a certain condition is met.

Question 10

What is the difference between a class and functional component?

Answer 10

Besides the way they are declared, class components can contain state while functional components cannot (unless you are using Hooks).

Question 11

What are the different lifecycle methods in React?

Answer 11

Mounting: initialization of the component.
constructor() - called before anything else.
getDerivedStateFromProps() - called before rendering the elements in the DOM.
render() - returns HTML elements rendered inside the DOM.
componentDidMount() - called right after the component is rendered inside the DOM.
Updating: caused by changes in state or props and leads to re-rendering of the component.
componentDidUpdate() - Gets called after the component gets re-rendered.
getSnapshotBeforeUpdate() - called just before the newly rendered HTML gets committed to the DOM.
shouldComponentUpdate() - called before rendering the component when new props are received.
render() - returns HTML elements rendered inside the DOM.
getDerivedStateFromProps() - called again when a component is being re-rendered.
Unmounting: componentWillUnmount() - called just before the component gets destroyed.

Question 12

What are Hooks?

Answer 12

Hooks let you use state and other React lifecycle features without writing a class component.

Question 13

What are Higher Order Components?

Answer 13

Higher Order Components are functions that take in a component and return a new component.

Question 14

What is the Redux setup process?

Answer 14

First you would set up the Store to contain any needed state data. Then you use the Provider component to make the Store available to the rest of your app. After this you can set up your action and reducer files. The actions will be set up as JavaScript objects that contain a type and payload to be “dispatched” by the application components or the Store’s dispatch API method. The reducers are functions that will take in 2 parameters: state and action. The reducer will in turn return the updated state (always a copy of the original state returned as a new state object - never mutate the original state). Using mapStateToProps() and mapDispatchToProps(), you can connect the actions and state to your components allowing your React component to communicate with your Redux Store.

Question 15

What are the core principles of Redux?

Answer 15

There are 3:

1. Single source of truth (meaning the global state of your application is stored in a single location - the Store)
2. State is read-only (The only way to change state is through actions)
3. Changes are made with pure functions (All reducers are pure functions meaning they take in the previous state and an action and return the next state)

Question 16

Explain how to make an AJAX request in Redux

Answer 16

There are a couple ways (all requiring middleware), but I’ll explain one way using Redux Thunk because I have actually used Redux Thunk in my own app.
Using Redux Thunk, the action creator returns a function that takes one argument - dispatch. Dispatch is a function that dispatches an action and you can use it inside a .then to execute it asynchronously.

Question 17

What are the benefits of using Redux DevTools?

Answer 17

It allows you to get a more detailed view of what is happening in your app, export the state history from production into development, generate tests for bugs caught in production as well as dispatch actions remotely.

Question 18

How is React DevTools used and why is it beneficial?

Answer 18

First you must install the DevTools through the Chrome Web Store or via FireFox Add-ons. Then once you have the React application open in the browser, you can right-click on the page and click Inspect. This will open the browser’s dev tools. You will have 2 new options: Components and Profiler. Components allows you to get an overview of what components are being used on the page and even gives you options such as viewing the source of those components. The Profiler tab allows you to record your actions while using the React page which allows you to see when components are being rendered and what is triggering those renders.

Question 19

How does React use closures?

Answer 19

React uses closures much in the same way JavaScript does. It’s the ability for a function to remember the environment in which it is declared.

Question 20

Compare React-Context to Redux

Answer 20

While Context is a built-in function, Redux is not. Redux is an open-source library that works with React while Context is built into React. Redux requires some initial set up to get the library connected to the application and may also require the use of middleware (such as Redux-Thunk). Although Context is generally easier to use, it is not suggestly for frequently refreshing or changing data. Although it allows for sharing values to nested components, Context itself will not manage state for you the way that Redux does.

Question 21

How do you send data up from a child component to the parent component?

Answer 21

You can do this by creating a callback function in the parent component. You pass the callback function into the child component as props. The child component then calls the parent’s callback function and passes the data to the parent component.