{"id":19074369,"url":"https://github.com/maia14/react-questions","last_synced_at":"2026-04-24T23:32:19.808Z","repository":{"id":121021538,"uuid":"303495698","full_name":"MaiA14/react-questions","owner":"MaiA14","description":"React interview questions","archived":false,"fork":false,"pushed_at":"2020-10-14T13:16:52.000Z","size":35,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-14T16:47:19.073Z","etag":null,"topics":["interview-questions","interviews","javascript","react"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MaiA14.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-12T19:41:26.000Z","updated_at":"2025-05-14T11:33:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"04556dda-5437-4989-98c1-0cbefb9a1886","html_url":"https://github.com/MaiA14/react-questions","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MaiA14/react-questions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaiA14%2Freact-questions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaiA14%2Freact-questions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaiA14%2Freact-questions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaiA14%2Freact-questions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MaiA14","download_url":"https://codeload.github.com/MaiA14/react-questions/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaiA14%2Freact-questions/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32245105,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T13:21:15.438Z","status":"ssl_error","status_checked_at":"2026-04-24T13:21:15.005Z","response_time":64,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["interview-questions","interviews","javascript","react"],"created_at":"2024-11-09T01:50:41.950Z","updated_at":"2026-04-24T23:32:19.790Z","avatar_url":"https://github.com/MaiA14.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# React questions\n\n1) **How React works? How Virtual-DOM works in React?**\\\n   React uses virtual DOM to enhance its performance. It uses the observable to detect state and prop changes. \n   React uses an efficient diff algorithm to compare the versions of virtual DOM. \n   It then makes sure that batched updates are sent to the real DOM for repainting or re-rendering of the UI.\n2) **What is JSX?**\\\n   JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.\n3) **What is React.createClass?**\\\n   React. createClass allows you to generate component \"classes.\" \n   Under the hood, your component class is using a bespoke class system implemented by React.\n   With ES6, React allows you to implement component classes that use ES6 JavaScript classes. The end result is the same -- you have a component class.\n4) **What is ReactDOM and what is the difference between ReactDOM and React?**\\\n   Without react-dom . The ReactDOM module exposes DOM-specific methods, while React has the core tools intended to be shared by React on different platforms (e.g. React Native). \n   To be more concise, react is for the components and react-dom is for rendering the components in the DOM.\n5) **What are the differences between a class component and functional component?**\\\n   The most obvious one difference is the syntax. A functional component is just a plain JavaScript function which accepts props as an argument and returns a React element. \n   A class component requires you to extend from React. Component and create a render function which returns a React element.\n6) **What is the difference between state and props?**\\\n   The state is a data structure that starts with a default value when a Component mounts. It may be mutated across time, mostly as a result of user events.\n   Props (short for properties) are a Component’s configuration. Props are how components talk to each other.\n   They are received from above component and immutable as far as the Component receiving them is concerned.\n   A Component cannot change its props, but it is responsible for putting together the props of its child Components.\n   Props do not have to just be data — callback functions may be passed in as props\n7) **What are controlled components?**\\\n   - A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. \n     A parent component \"controls\" it by handling the callback and managing its own state and passing the new values as props to the controlled component. \n     You could also call this a \"dumb component\"\n   - A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. \n     This is a bit more like traditional HTML.\n8) **What is a higher order component**\\\n      A higher-order component (HOC) is an advanced technique in React for reusing component logic. \n      They are a pattern that emerges from React's compositional nature. \n      Concretely, a higher-order component is a function that takes a component and returns a new component.\n9)  **What is Redux**\\\n       the entire application state is kept in a single store. The store is simply a javascript object. \n       The only way to change the state is by firing actions from your application and then writing reducers for these actions that modify the state. \n       The entire state transition is kept inside reducers and should not have any side-effects.\n       Redux is based on the idea that there should be only a single source of truth.\n10) **What is Redux Thunk used for?**\\\n      Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, \n      or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.\n11)  **What is PureComponent? When to use PureComponent over Component?**\\\n       You should use it when a component could re-render even if it had the same props and state. An example of this is when a parent component had to re-render but the\n       child component props and state didn't change. The child component could benefit from PureComponent because it really didn't need to re-render.\n12)  **How Virtual-DOM is more efficient than Dirty checking?**\\\n       The virtual DOM is used for efficient re-rendering of the DOM. This isn't really related to dirty checking your data. ... In fact, the diff algorithm is a dirty\n       checker itself but it is used to see if the DOM is dirty instead. We aim to re-render the virtual tree only when the state changes.\n13)  **Is setState() is async? Why is setState() in React Async instead of Sync?**\\\n      This is because setState alters the state and causes rerendering. This can be an expensive operation and making it synchronous might leave the browser unresponsive.\n      Thus the setState calls are asynchronous as well as batched for better UI experience and performance.\n14)  **What is render() in React? And explain its purpose?**\\\n      The ReactDOM. render() function takes two arguments, HTML code and an HTML element. The purpose of the function is to display the specified HTML code\n      inside the specified HTML element.\n15)  **Explain the components of Redux?**\\\n      - Action — Actions are payloads of information that send data from our application to our store. They are the only source of information for the store. \n        We send them to the store using store.dispatch(). Primarly, they are just an object describes what happened in our app.\n      - Reducer — Reducers specify how the application’s state changes in response to actions sent to the store. \n        Remember that actions only describe what happened,\n        but don’t describe how the application’s state changes. So this place determines how state will change to an action.\n      - Store — The Store is the object that brings Action and Reducer together. The store has the following responsibilities: Holds application state; Allows access to state\n        via getState(); Allows state to be updated via dispatch(action); Registers listeners via subscribe(listener); Handles unregistering of listeners via the function\n        returned by subscribe(listener).\n16)  **What is React.cloneElement? And the difference with this.props.children?**\\\n      React.cloneElement clone and return a new React element using using the passed element as the starting point. The resulting element will have the original element's\n      props with the new props merged in shallowly. New children will replace existing children. key and ref from the original element will be preserved.\n      React.cloneElement only works if our child is a single React element. For almost everything {this.props.children} is the better solution. \n17)  **What is the second argument that can optionally be passed to setState and what is its purpose?**\\\n       A callback function which will be invoked when setState has finished and the component is re-rendered.\n18)  **What is the difference between React Native and React?**\\\n       React Native is an entire platform allowing you to build native, cross-platform mobile apps, and React. js is a JavaScript library you use for constructing a high\n       performing UI layer. ... Like the browser code in React is rendered through Virtual DOM while React Native uses Native API's to render components on mobile.\n19)  **Can web browsers read JSX directly?**\\\n       Web browsers cannot read JSX directly. This is because they are built to only read regular JS objects and JSX is not a regular JavaScript object \n       For a web browser to read a JSX file, the file needs to be transformed into a regular JavaScript object. For this, we use Babel.\n20)  **Why is there a need for using keys in Lists?**\\\n       Keys are very important in lists for the following reasons:\n       - A key is a unique identifier and it is used to identify which items have changed, been updated or deleted from the lists\n       - It also helps to determine which components need to be re-rendered instead of re-rendering all the components every time. Therefore, it increases performance, as\n         only the updated components are re-rendered.\n21)  **What is React Router?**\\\n      React Router is a routing library built on top of React, which is used to create routes in a React application. \n22)  **What is the Flux?**\\\n      Flux is the application architecture that Facebook uses for building web applications. It is a method of handling complex data inside a client-side application and\n      manages how data flows in a React application.\n      There is a single source of data (the store) and triggering certain actions is the only way way to update them.The actions call the dispatcher, and then the store is\n      triggered and updated with their own data accordingly.\n      When a dispatch has been triggered, and the store updates, it will emit a change event that the views can rerender accordingly.\n 23) **Question: Explain various lifecycle methods of React components.**\\\n      - componentDidMount() – Executes on the client side after the first render\n      - componentDidUpdate() – Called immediately after rendering takes place in the DOM\n      - componentWillMount() – Executes immediately before rendering starts on both the client-side and the server-side\n      - componentWillReceiveProps() – Invokes when props are received from the parent class and before another render is called\n      - componentWillUnmount() – Used to clear up the memory space. Called right after the component is unmounted from the DOM\n      - componentWillUpdate() – Called immediately before rendering takes place in the DOM\n      - shouldComponentUpdate() – Returns either true or false. Though false by default, needs to be set to return true if the component needs to be updated\n  24) **Can parent component change value in States and Props?**\\\n       The parent component can change the value in Props but not in the state.\n  25) **Can changes be made inside the component?**\\\n       The changes can be made inside the state but not in Props.\n       \n       \n       Sources: https://medium.com/@vigowebs/frequently-asked-react-js-interview-questions-and-answers-36f3dd99f486\n                https://www.simplilearn.com/reactjs-interview-questions-and-answers-article\n                https://hackr.io/blog/react-interview-questions\n                \n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaia14%2Freact-questions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaia14%2Freact-questions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaia14%2Freact-questions/lists"}