50 React Interview Questions You Must Know

13. How do I embed two or more components into one component?

Components can be embedded in a component in the following ways:

class MyComponent extends React.Component{
    render(){
        return(          
            <div>
                <h1>Hello</h1>
                <Header/>
            </div>
        );
    }
}
class Header extends React.Component{
    render(){
        return
            <h1>Header Component</h1>   
   };
}
ReactDOM.render(
    <MyComponent/>, document.getElementById('content')
);

14. What are Props?

Props is shorthand for properties in React. They are read-only components and must remain pure, that is, immutable. They are always passed from parent to child components throughout the application. A child component can never return a prop to its parent. This helps maintain a one-way data flow and is often used to render dynamically generated data.

15. What is the state in React? How is it used?

The state is the core of the React component, the source of the data, and must be as simple as possible. Basically, a state is an object that determines the rendering and behavior of a component. Unlike props, they are mutable and create dynamic and interactive components. They can be accessed via this.state().

16. Distinguish between states and props

17. How do I update the state of a component?

You can update the state of a component with this.setState().

class MyComponent extends React.Component {
    constructor() {
        super();
        this.state = {
            name: 'Maxx',
            id: '101'
        }
    }
    render()
        {
            setTimeout(()=>{this.setState({name:'Jaeha', id:'222'})},2000)
            return (              
                <div>
                    <h1>Hello {this.state.name}</h1>
                    <h2>Your Id is {this.state.id}</h2>
                </div>
            );
        }
    }
ReactDOM.render(
    <MyComponent/>, document.getElementById('content')
);

18. What is the arrow function in React? How does it work?

The arrow function (=>) is a short syntax for writing function expressions. These functions allow the context of the component to be properly bound, because automatic binding is not available by default in ES6. The arrow function is useful when working with higher-order functions.

//General way
render() {    
    return(
        <MyInput onChange = {this.handleChange.bind(this) } />
    );
}
//With Arrow Function
render() {  
    return(
        <MyInput onChange = { (e)=>this.handleOnChange(e) } />
    );
}

Distinguish between stateful and stateless components.

20. What are the phases of the React component life cycle?

There are three distinct phases in the React component life cycle:

1. Initial Render Stage:This is the stage where the component is about to begin its life journey and enter the DOM.
2. Update phase:Once a component is added to the DOM, it can only be updated and re-rendered when a prop or state changes. This only happens at this stage.
3. Unloading phase:This is the final stage of the component’s life cycle, when the component is destroyed and removed from the DOM.

21. Explain the React component’s lifecycle methods in detail.

Some of the most important lifecycle approaches are:

1. ComponentWillMount () – Executed before rendering, on both client and server sides.
2. ComponentDidMount () – Executes on the client only after the first render.
3. ComponentWillReceiveProps () – when the parent class receives the props and call before calling another renderer.
4. ShouldComponentUpdate () – Returns true or false based on certain criteria. If you wish to update the component, return true otherwise return false. By default, it returns false.
5. ComponentWillUpdate () – Called before rendering in the DOM.
6. ComponentDidUpdate () – Called immediately after rendering occurs.
7. ComponentWillUnmount () – Called after the component is unmounted from the DOM. Used to clear memory space.

22. What is the event in React?

In React, events are triggered reactions to specific actions such as hover, click, or keystroke. Handling these events is similar to handling events in DOM elements. But there are some grammatical differences, such as:

1. Use hump nomenclature to name events instead of just using lowercase letters.
2. Events are passed as functions rather than strings.

The event parameter recontains a set of event-specific properties. Each event type contains its own properties and behavior, which can only be accessed through its event handler.

23. How to create an event in React?

class Display extends React.Component({    
    show(evt) {
        // code   
    },   
    render() {      
        // Render the div with an onClick prop (value is a function)        
        return (            
            <div onClick={this.show}>Click Me!</div>
        );    
    }
});

24. What is a composite event in React?

Synthetic events are objects that act as cross-browser wrappers around browser native events. They combine the behavior of different browsers into a single API. This is done to ensure that events display consistent properties across browsers.

25. What do you know about React’s refs?

Refs is shorthand for references in React. It is a property that helps store a reference to a specific React element or component, which is returned by the component render configuration function. A reference to a particular element or component returned by render(). They come in handy when you need to make DOM measurements or add methods to a component.

class ReferenceDemo extends React.Component{
     display() {
         const name = this.inputDemo.value;
         document.getElementById('disp').innerHTML = name;
     }
render() {
    return(        
          <div>
            Name: <input type="text" ref={input => this.inputDemo = input} />
            <button name="Click" onClick={this.display}>Click</button>            
            <h2>Hello <span id="disp"></span> !!!</h2>
          </div>
    );
   }
 }

26. List some situations where Refs should be used.

Here are the situations where refs should be used:

• When you need to manage focus, select text, or media playback
• Trigger animation
• Integration with third-party DOM libraries

27. How do I modularize code in React?

You can modularize your code using the export and import attributes. They help you write components separately in different files.

//ChildComponent.jsx export default class ChildComponent extends React.Component { render() { return( <div> <h1>This is a child component</h1> </div> ); } } //ParentComponent.jsx import ChildComponent from './childcomponent.js'; class ParentComponent extends React.Component { render() { return( <div> <App /> </div> ); }}

28. How to create a form in React

The React form is similar to an HTML form. In React, however, the state is contained in the component’s state property and can only be updated through setState(). Therefore, elements cannot update their state directly, and their submission is handled by JavaScript functions. This function has full access to the data entered into the form by the user.

handleSubmit(event) { alert('A name was submitted: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" value={this.state.value} onChange={this.handleSubmit} /> </label> <input type="submit" value="Submit"  /> </form> ); }

29. What do you know about controlled and uncontrolled components?

30. What is a High Order Component (Hoc)?

High-order components, a high-level way of reusing component logic, are a component pattern derived from React. Hoc is a custom component that contains another component within it. They can accept any dynamics provided by their child components, but do not modify or copy any behavior in their input components. You can think of Hoc as a “Pure” component.

31. What can you do with HOC?

Hoc can be used for many tasks, such as:

• Code reuse, logic, and guiding abstractions
• Rendering hijacked
• State abstraction and control
• Props to control

32. What is a pure component?

Pure components are the simplest and fastest components that can be written. They can replace any component that has only render(). These components enhance code simplicity and application performance.

33. What is the importance of key in React?

The key is used to identify the unique Virtual DOM element and the corresponding data that drives the UI. They help React optimize rendering by recycling all current elements in the DOM. These keys must be unique numbers or strings, and React only reorders elements rather than renderings them. This can improve the performance of your application.

React Redux

34. What are the main problems with the MVC framework?

Here are some of the major issues with the MVC framework:

• DOM manipulation is very expensive
• The program runs slowly and inefficiently
• Serious memory waste
• Because of cyclic dependencies, component models need to be created around models and views

35. Explain Flux

Flux is an architectural pattern that enforces one-way data flow. It controls derived data and uses a central store with all data permissions to communicate between multiple components. Data updates throughout the application must only occur here. Flux provides stability for applications and reduces errors at run time.

36. What is Redux?

Redux is one of the hottest front-end development libraries today. It is a predictable state container for JavaScript programs and is used for state management throughout the application. Applications developed with Redux are easy to test, can run in different environments, and display consistent behavior.

37. What are the three principles that Redux follows?

1. Single fact source: The state of the entire application is stored in an object/state tree in a single store. A single state tree makes it easier to track changes over time and debug or inspect applications.
2. The state is read-only: the only way to change the state is to trigger an action. Actions are ordinary JS objects that describe changes. Just as State is the minimal representation of data, this operation is the minimal representation of changes to the data.
3. Use pure functions to make changes: In order to specify how the state tree is transitioned through operations, you need pure functions. Pure functions are those whose return value depends only on the value of their arguments.

38. What is your understanding of “single source of fact”?

Redux uses “Store” to Store the entire state of a program in one place. So the state of all components is stored in the Store, and they receive updates from the Store itself. A single state tree makes it easier to track changes over time and debug or inspect your program.

39. List the components of Redux.

Redux consists of the following components:

1. Action – This is an object that describes what happened.
2. Reducer – This is a place to determine how the state will change.
3. Store – The entire program’s state/object tree is stored in the Store.
4. View – Displays only the data provided by the Store.

40. How does data flow through Redux?

41. How do I define Action in Redux?

Actions in React must have a type attribute that indicates the type of Action being executed. They must be defined as string constants, and you can add more attributes to them. In Redux, Actions are created with a function called Action Creators. Here are examples of Action and Action Creator:

function addTodo(text) {
       return {
                type: ADD_TODO,    
                 text
    }
}

Explain the role of the Reducer.

The Reducers are pure functions that specify how the state of the application changes in response to an Action. The reducer works by accepting the previous state and action, and then it returns a new state. It determines which update needs to be performed based on the type of operation and then returns the new value. If it doesn’t need to complete the task, it returns to its original state.

43. What is the significance of Store in Redux?

Store is a JavaScript object that stores the state of a program and provides methods to access the state, schedule actions, and register listeners. An application’s entire state/object tree is kept in a single storage. As a result, Redux is very simple and predictable. We can pass middleware to the Store to process the data and record the various actions that change the state of the store. All operations return a new state through the reducer.

44. What is the difference between Redux and Flux?

45. What are the advantages of Redux?

The advantages of Redux are as follows:

• Predictability of results – Since there is always one real source, the Store, there is no question of how to synchronize the current state with the actions and the rest of the application.
• Maintainability – Code becomes easier to maintain, with predictable results and strict structure.
• Server-Side Rendering – You just need to pass the store created on the server to the client. This is useful for initial rendering and can optimize application performance to provide a better user experience.
• Developer Tools – From actions to state changes, developers can track everything that is happening in the application in real time.
• Community and Ecosystem – Redux has a huge community behind it, which makes it even more fascinating. A large community of talented people has contributed to improvements in the library and developed various applications.
• Easy to test – Redux’s code is primarily small, pure, and standalone. This makes the code testable and independent.
• Organization – Redux explains exactly how the code is organized, which makes the code more consistent and simple for the team to use.

The React routing

46. What is React routing?

React Routing is a powerful routing library built on top of React to help you add new screens and streams to your application. This keeps the URL in sync with the data displayed on the Web page. It is responsible for maintaining a standardized structure and behavior and is used to develop single-page Web applications. The React route has a simple API.

47. Why do you use switch keyword in React Router V4?

Although

48. Why do we need routing in React?

The Router is used to define multiple routes, and when a user defines a specific URL, if that URL matches the path of any of the “routes” defined within the Router, the user will be redirected to that particular route. So basically we need to add a Router library to our application that allows us to create multiple routes, each of which gives us a unique view

< eXact = "eXact" = "eXact" = "eXact" = "eXact" = "eXact" = "eXact" = "eXact" = "eXact" = "eXact" = "eXact" = "eXact" = "eXact" component={Post}/> </switch>

49. List the benefits of the React Router.

Several advantages are:

1. Just like React based components, in React Router V4, the API is‘All About Components’. You can visualize the Router as a single root component (<BrowserRouter>), where we assign specific subroutes (<route>) Wrap it up.
2. No need to manually set the history value: In React Router V4, all we do is wrap the route in the
   
   component.
   
3. The packages are separate: there are three packages, one for Web, one for Native, and one for Core. This makes our application more compact. Switching is easy based on a similar coding style.

50. What is the difference between React Router and Conventional Router?

Hopefully this React interview questions and answers will help you prepare for your interview. Wish all the best!

The first send WeChat messages public number: Jingchengyideng

Welcome to scan the two-dimensional code to pay attention to the public number, every day to push you fresh front-end technology articles

Read on for the other great articles in this column:

• 12 Amazing CSS Experiment Projects
• What are the front-end interview questions at the world’s top companies
• CSS Flexbox Visualization Manual
• 11 of the best JavaScript dynamic effects libraries
• The holidays are boring? Write a little brain game in JavaScript!
• React from a designer’s point of view
• How does CSS sticky positioning work
• A step-by-step guide to implementing animations using HTML5 SVG
• Programmer 30 years old before the monthly salary is less than 30K, which way to go
• 7 open front end questions
• 8 top VS Code extensions for the front end
• React Tutorial: A Quick Start Guide
• A literature that understands TypeScript types