Giter Site home page Giter Site logo

sudheerj / reactjs-interview-questions Goto Github PK

View Code? Open in Web Editor NEW
36.3K 36.3K 8.7K 1.82 MB

List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!!

HTML 18.43% CSS 9.96% JavaScript 71.61%
interview-preparation interview-questions javascript javascript-applications javascript-framework javascript-interview-questions react react-interview-questions react-native react-router react16 reactjs redux

reactjs-interview-questions's People

Contributors

abachi avatar aduyng avatar agchou avatar alin11 avatar ayatoullah avatar chankruze avatar chenc041 avatar chetannada avatar dependabot[bot] avatar giovannipds avatar henriquemarcelo avatar lewwadoo avatar martinschneider01 avatar maxzirps avatar mbinou avatar mrajay1 avatar nelsonfrank avatar npiyush97 avatar omerg avatar progapanda avatar rohitmultani avatar sakhidamaulik avatar sayjeyhi avatar sudheerj avatar thecodejack avatar uchiha-suraj avatar willbuckingham avatar yashwanth2804 avatar zlldnv avatar zonayedpca avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

reactjs-interview-questions's Issues

Question 15 Enhancement.

How to pass a parameter to an event handler or callback?

There is another way I think you need to add this as well, It is quite simple and easy to understand.

methodName = (parameter) => () => {
  //Do something with parameter.
  console.log("parameter", parameter)
};

<button onClick={this.methodName('value you want to pass')} >Click</button>

Question 11 note

Hi @sudheerj
in Q11, u wrote

Note: The only place you can directly assign to the state object is in constructor.

but u can remove the constructor from the component and access the state object

class Hello extends Component {
       state= {
           a:"hello",
           b:" react"
       }
render(){
    const {a,b} = this.state;
    return(
        <div>{a + b}</div>
    )
   }
 }

Duplication of questions

It seems like 44, 87, 118 are duplicating.
I think I have already saw questions that are also duplicating.
Probably it is better to separate categories to subcategories to avoid that?

Question 31 and 78 are duplicated

  1. What is the difference between createElement and cloneElement?

JSX elements will be transpiled to React.createElement() functions to create React elements which are going to be used for the object representation of UI. Whereas cloneElement is used to clone an element and pass it new props.

  1. What is the difference between createElement() and cloneElement() methods?
    In JSX the React element is transpiled to React.createElement() which represents an UI element. Whereas React.cloneElement() is used in order to clone an element and pass it new props.

Internationalization

Hello! Is there are any plans for it? I think I can contribute to Russian version.

New Question: What is state mutation and how to prevent it ?

Problem: State mutation happens when you try to update the state of a component without actually using setState function.
This can happen when you are trying to do some computations using a state variable and unknowingly save the result in the same state variable.

This is the main reason why it is advised to return new instances of state variables from the reducers by using Object.assign({}, ...) or spread syntax.

This can cause unknown issues in the UI as the value of the state variable got updated without telling React to check what all components were being affected from this update and it can cause UI bugs.

Ex:

class A extends React.component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    }
 }

componentDidMount() {
  let { loading } = this.state;
  loading = (() => true)(); // Trying to perform an operation and directly saving in a state variable
}
....

Resolution: Make sure your state variables are immutable by either enforcing immutability by using plugins like Immutable.js, always using setState to make updates and returning new instances in reducers when sending updated state values.

A few suggestions

This is a great list. Not only for interviews but also for just getting up to speed with React, so thank you. If I can piggyback on #22, here are some suggestions I thought about while browsing the list:

  • 105: This isn't React-specific and I think removing it would help make the content more focused.
  • 107: Maybe mention why this is necessary instead of just using autofocus?

please help me on this

'm using node and I tried to create a simple react-app by using the following commands:

npm install -g create-react-app
create-react-app project-name
npm start

I had no issues in creating an app and my app got created successfully.

Inside that directory, you can run several commands:

npm start
Starts the development server.

npm run build
Bundles the app into static files for production.

npm test
Starts the test runner.

npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd appname
npm start

Happy hacking!_**

But when I tried to run my start script I'm facing an error

events.js:292
throw er; // Unhandled 'error' event
^

Error: spawn cmd ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
at onErrorNT (internal/child_process.js:469:16)
at processTicksAndRejections (internal/process/task_queues.js:84:21)
Emitted 'error' event on ChildProcess instance at:
at Process.ChildProcess._handle.onexit (internal/child_process.js:273:12)
at onErrorNT (internal/child_process.js:469:16)
at processTicksAndRejections (internal/process/task_queues.js:84:21) {
errno: 'ENOENT',
code: 'ENOENT',
syscall: 'spawn cmd',
path: 'cmd',
spawnargs: [ '/s', '/c', 'start', '""', '/b', '"http://localhost:3000/"' ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ADMIN\AppData\Roaming\npm-cache_logs\2020-07-01T09_26_11_748Z-debug.log

E:\myreactapp\reactawesome>

please help me on this error..how to solve.
react

Epub version questions rendering error

I have downloaded the latest epub version and I got an error that says "error on line 1511 at column 6: Opening and ending tag mismatch: li line 0 and h1".

I'm assuming that the template literals are not working with the epub version.

Screenshot 2021-06-18 at 11 02 43 PM

OS: macOS BigSur
Books: V3.2

flashcards automation

is there a way to generate automatically questions with answers to anki / quizlet flashcards app ? Could be useful for devs who want to learn based on spaced repetition.

There are two number 88s

  1. What are the exceptions on React component naming?
  1. Are custom DOM attributes supported in React v16?

First one isn't in a table of contents

65. Is it good to use setState() in componentWillMount() method?

The answer written here is wrong. I think it is taken from this stack overflow link https://stackoverflow.com/questions/40199151/cant-set-state-in-componentwillmount. There reason behind setState not working was some parsing error. I think the answer for it need to be updated. I have tested it with the below code and it working properly with componentWillMount.

import React, { Component } from 'react';
import { Text } from 'react-native';

class Cat extends Component {

constructor(props) {
super(props)
this.state = {
name: 'Anand'
};
}

componentWillMount() {
setTimeout(()=> {
this.setState({name:'anand Kumar jha will'})
}, 3000)
}

componentDidMount() {
setTimeout(()=> {
this.setState({name:'anand Kumar jha did'})
}, 1000)
}

render() {
return (
Hello, I am your cat! {this.state.name}
);
}
}

export default Cat;

Licence for using questions.

Hello @sudheerj
Thank you for awesome project. I just wanna ask you for licence for using your questions in my pet project. What do you think about add Licences to all your question repos?

What is prop-drilling?

Prop Drilling is the process by which you pass data from one part of the React Component tree to another by going through other parts that do not need the data but only help in passing it around.

How to solve it? Using state management tools such as Redux

Comments to improve the content

Hello @sudheerj , thank you for this wonderful collection of questions! Here are some of my comments to improve the document:

  • Duplicity: 82 and 109
    82 and 109 are almost the same and can be considered as duplicate ( 82: "Why we need to pass a function to setState()?" - 109: "Why function is preferred over object for setState?" )
  • Duplicity: 87 and 118
    87 and 118 refer to a very similar topic and can be merged ( 87: "Why should component names start with capital letter?" - 118: "Why React component names must begin with a capital letter?" )
  • 102: "How to listen to state changes?"
    componentWillUpdate is deprecated.
  • 182: "What are Redux selectors and why to use them?"
    I think why to use them is not mentioned. One specific need is when using them with "select" method of saga's.
  • 205: How to use TypeScript in create-react-app application?
    create-react-app now supports TypeScript natively: see: https://github.com/wmonk/create-react-app-typescript
  • 208: What is an action in Redux?
    Should go under redux section instead of misc.
  • 209: Does the statics object work with ES6 classes in React?
    There is a third way of writing statics; that is, outside the class:
class Component extends React.Component {
   ....
}

Component.propTypes = {...}
Component.someMethod = function(){....}

Hooks are a new feature proposal that lets you...

Hooks are no more a proposal

Typo

Fix the typo in question 244. Convert demonistration->demonstration in the 4th line of the answer statement.

199 and 200 are extremely opinionated and not fact based

as stated in the title, the comparison of react to angular and vuejs is fairly opinionated and serves no real benefit for interviews. at most, these notes will confuse interviewees.

devs should base the answer to these two questions on their experience, not heresy or find themselves in trouble explaining further.

I'd recommend removing these two questions.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.