Click ⭐ if you like the project. Follow me @sisi_tarak for more.
Pull Request are highly recommended and appreciated.
Hide/Show table of contents
-
React (aka React.js or ReactJS) is an open-source front-end JavaScript library that is used for building composable user interfaces, especially for single-page applications. It is used for handling view layer for web and mobile apps based on components in a declarative approach.
React was created by Jordan Walke, a software engineer working for Facebook. React was first deployed on Facebook's News Feed in 2011 and on Instagram in 2012.
-
The history of ReactJS started in 2010 with the creation of XHP. XHP is a PHP extension which improved the syntax of the language such that XML document fragments become valid PHP expressions and the primary purpose was used to create custom and reusable HTML elements.
The main principle of this extension was to make front-end code easier to understand and to help avoid cross-site scripting attacks. The project was successful to prevent the malicious content submitted by the scrubbing user.
But there was a different problem with XHP in which dynamic web applications require many roundtrips to the server, and XHP did not solve this problem. Also, the whole UI was re-rendered for small change in the application. Later, the initial prototype of React is created with the name FaxJ by Jordan inspired from XHP. Finally after sometime React has been introduced as a new library into JavaScript world.
Note: JSX comes from the idea of XHP
-
The major features of React are:
- Uses JSX syntax, a syntax extension of JS that allows developers to write HTML in their JS code.
- It uses Virtual DOM instead of Real DOM considering that Real DOM manipulations are expensive.
- Supports server-side rendering which is useful for Search Engine Optimizations(SEO).
- Follows Unidirectional or one-way data flow or data binding.
- Uses reusable/composable UI components to develop the view.
-
JSX (JavaScript XML) is a syntax extension for JavaScript used in React to describe the structure of UI components. It allows developers to write HTML-like code directly in JavaScript. JSX is compiled into regular JavaScript functions by tools like Babel before being executed by the browser.
import React from 'react'; import ReactDOM from 'react-dom'; const App = () => { return ( <div> <h1>Hello, World!</h1> <p>This is a JSX example.</p> </div> ); }; ReactDOM.render(<App />, document.getElementById('root'));
-
State is an internal data storage mechanism in React components, managed by React itself. Props (short for properties) are read-only data passed from parent to child components. The main difference is that state is mutable and controlled by the component itself, whereas props are immutable and controlled by the parent component.
-
Keys are special string attributes used by React to identify which items have changed, been added, or been removed in a list of elements. Keys help React efficiently update the UI by minimizing re-renders. Keys should be unique among siblings, but don't need to be globally unique.
const ListComponent = () => { const items = ['apple', 'banana', 'cherry']; return ( <ul> {items.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> ); };
-
React components have several lifecycle methods that execute at different stages of a component's existence. These methods include
componentDidMount,componentDidUpdate,componentWillUnmount, etc. They allow developers to hook into different points in a component's lifecycle to perform tasks like fetching data, updating the DOM, or cleaning up resources. -
setState()is a method used to update the state of a React component. WhensetState()is called, React re-renders the component and its children. It can take an object as an argument to update state properties asynchronously, or a callback function to perform actions after the state has been updated.import React, { Component } from 'react'; class Counter extends Component { constructor(props) { super(props); this.state = { count: 0 }; } incrementCount = () => { this.setState({ count: this.state.count + 1 }); }; render() { return ( <div> <p>Count: {this.state.count}</p> <button onClick={this.incrementCount}>Increment</button> </div> ); } } export default Counter;
-
Higher-order components are functions that take a component and return a new component with enhanced functionality. They are a common pattern for code reuse, logic sharing, and cross-cutting concerns like authentication, logging, etc. HOCs allow you to abstract away common logic into reusable functions.
-
Controlled components are components whose form elements (like inputs, selects, and textareas) are controlled by React state. This means that the component renders a form element whose value is controlled by React, and React handles the value changes through state and event handlers.
import React, { Component } from 'react'; class ControlledComponent extends Component { constructor(props) { super(props); this.state = { value: '' }; } handleChange = (event) => { this.setState({ value: event.target.value }); }; render() { return ( <input type="text" value={this.state.value} onChange={this.handleChange} /> ); } } export default ControlledComponent;
-
Functional components are JavaScript functions that accept props and return React elements. They are simpler and more lightweight than class components, and they can use React hooks to manage state and lifecycle.
Class components are ES6 classes that extendReact.Componentand have their own state and lifecycle methods. -
React hooks are functions that allow functional components to use state, lifecycle, and other React features without writing a class. Examples of hooks include
useState,useEffect,useContext, etc. Custom hooks are functions that use hooks internally and allow you to reuse stateful logic between different components.import { useState } from 'react'; const useCounter = (initialCount) => { const [count, setCount] = useState(initialCount); const increment = () => { setCount(count + 1); }; return { count, increment }; }; export default useCounter;
-
React Fragments allow you to group multiple children elements without adding extra nodes to the DOM. They are useful when you need to return multiple elements from a component's render method, but don't want to add unnecessary divs or spans. Fragments improve code readability and performance by reducing the number of DOM elements.
-
Refs in React provide a way to access the underlying DOM nodes or React elements directly. They are primarily used for managing focus, integrating with third-party DOM libraries, or triggering imperative animations.
import React, { useRef } from 'react'; const RefExample = () => { const inputRef = useRef(null); const focusInput = () => { inputRef.current.focus(); }; return ( <div> <input ref={inputRef} type="text" /> <button onClick={focusInput}>Focus Input</button> </div> ); }; export default RefExample;
-
Context in React provides a way to pass data through the component tree without having to pass props manually at every level. It's primarily used when some data needs to be accessible by many components at different nesting levels.
import React, { createContext, useContext } from 'react'; const ThemeContext = createContext('light'); const ThemedComponent = () => { const theme = useContext(ThemeContext); return <p>Current Theme: {theme}</p>; }; const ContextExample = () => { return ( <ThemeContext.Provider value="dark"> <ThemedComponent /> </ThemeContext.Provider> ); }; export default ContextExample;
-
The virtual DOM in React is a lightweight copy of the actual DOM maintained by React. When state or props change, React compares the virtual DOM with the previous version and computes the minimum number of DOM operations needed to update the actual DOM. This process makes React applications more efficient by minimizing DOM manipulation.
Another Example:
Imagine you have a list of items in your UI, and you update one item's text. Instead of directly manipulating the DOM to change the text, React updates the virtual DOM, compares it with the previous state, and efficiently applies the necessary changes to the actual DOM. -
Keys are special attributes used by React to identify which items have changed, been added, or been removed in a list of elements. They help React efficiently update the UI by minimizing re-renders and ensuring that elements are re-used properly. Keys should be unique among siblings, but don't need to be globally unique.
Another Example:
Consider rendering a list of items dynamically using map(). Assigning a unique key to each item allows React to track which items have been added, removed, or updated efficiently. -
Both
useStateanduseReducerhooks are used to manage state in functional components. The main difference is thatuseStateis simpler and more suitable for managing independent state variables, whileuseReduceris more powerful and allows for complex state logic and actions.import React, { useReducer } from 'react'; const initialState = { count: 0 }; const reducer = (state, action) => { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; default: return state; } }; const ReducerExample = () => { const [state, dispatch] = useReducer(reducer, initialState); return ( <div> Count: {state.count} <button onClick={() => dispatch({ type: 'increment' })}>Increment</button> <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button> </div> ); }; export default ReducerExample;
-
Lazy loading is a technique used to defer the loading of non-essential resources (such as components or data) until they are actually needed. In React, lazy loading can be achieved using dynamic imports and the
React.lazy()function, which allows you to import components asynchronously.import React, { Suspense } from 'react'; const LazyLoadedComponent = React.lazy(() => import('./LazyLoadedComponent')); const LazyLoadingExample = () => ( <Suspense fallback={<div>Loading...</div>}> <LazyLoadedComponent /> </Suspense> ); export default LazyLoadingExample;
-
PropTypes is a runtime type checking mechanism for React props. It helps catch bugs early by providing a way to specify the type of each prop a component should receive. PropTypes also serve as documentation for components, making it easier for other developers to understand how to use them.
import React from 'react'; import PropTypes from 'prop-types'; const MyComponent = ({ name, age }) => ( <div> <p>Name: {name}</p> <p>Age: {age}</p> </div> ); MyComponent.propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number.isRequired }; export default MyComponent;
-
React hooks are functions that enable functional components to use state and lifecycle features without writing a class. Some built-in hooks include
useStatefor managing state,useEffectfor handling side effects,useContextfor accessing context, anduseReducerfor managing more complex state logic.import React, { useState, useEffect } from 'react'; const HooksExample = () => { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }; export default HooksExample;
-
Conditional rendering is the process of dynamically determining whether a component or element should be rendered based on certain conditions. This is typically done using JavaScript expressions or ternary operators inside JSX.
import React from 'react'; const ConditionalComponent = ({ isLoggedIn }) => { return isLoggedIn ? <p>Welcome, User!</p> : <p>Please log in.</p>; }; export default ConditionalComponent;
-
Arrow functions automatically bind
thisto the enclosing lexical scope, which eliminates the need to manually bindthisin event handlers. This makes the code cleaner and more concise, especially when dealing with complex component hierarchies or passing functions as props.import React, { useState } from 'react'; const ArrowFunctionExample = () => { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); }; return ( <div> <p>Count: {count}</p> <button onClick={handleClick}>Increment</button> </div> ); }; export default ArrowFunctionExample;
-
What is the purpose of useEffect hook in React? How does it differ from componentDidMount and componentDidUpdate lifecycle methods?
The
useEffecthook in React is used to perform side effects in functional components. It combines the functionality ofcomponentDidMount,componentDidUpdate, andcomponentWillUnmountlifecycle methods in class components. It's called after every render and allows you to perform data fetching, subscriptions, or manually changing the DOM.import React, { useState, useEffect } from 'react'; const EffectExample = () => { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }; export default EffectExample;
-
React portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. This is useful for scenarios like modals, tooltips, or dropdown menus where you want to render content at a different location in the DOM tree.
import React, { useState } from 'react'; import ReactDOM from 'react-dom'; const PortalExample = () => { const [showModal, setShowModal] = useState(false); return ( <div> <button onClick={() => setShowModal(true)}>Open Modal</button> {showModal && ReactDOM.createPortal( <div className="modal"> <div className="modal-content"> <span className="close" onClick={() => setShowModal(false)}> × </span> <p>This is a modal</p> </div> </div>, document.getElementById('modal-root') )} </div> ); }; export default PortalExample;
-
React Router is a library that allows you to handle routing in React applications. It provides components like
BrowserRouter,Route,Link, etc., for declarative routing. React Router enables navigation between different components/pages of a single-page application.import React from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; const Home = () => <h2>Home</h2>; const About = () => <h2>About</h2>; const RoutingExample = () => ( <Router> <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> </ul> </nav> <Route path="/" exact component={Home} /> <Route path="/about" component={About} /> </div> </Router> ); export default RoutingExample;
-
Error boundaries in React are components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of crashing the entire application. Error boundaries are useful for handling errors in components with asynchronous code, third-party libraries, or complex UI logic.
import React, { Component } from 'react'; class ErrorBoundary extends Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, errorInfo) { console.error('Error:', error); console.error('Error Info:', errorInfo); } render() { if (this.state.hasError) { return <h1>Something went wrong.</h1>; } return this.props.children; } } export default ErrorBoundary;
-
Controlled components are components whose form elements (like inputs, selects, and textareas) are controlled by React state. Uncontrolled components are components whose form elements are not controlled by React state but instead rely on the DOM to manage their state.
// Controlled Component import React, { useState } from 'react'; const ControlledComponent = () => { const [value, setValue] = useState(''); const handleChange = (event) => { setValue(event.target.value); }; return ( <input type="text" value={value} onChange={handleChange} /> ); }; export default ControlledComponent;
// Uncontrolled Component import React from 'react'; const UncontrolledComponent = () => ( <input type="text" defaultValue="Initial Value" /> ); export default UncontrolledComponent;
-
The
memofunction in React is a higher-order component that memoizes the result of a functional component rendering. It's similar toPureComponentfor class components and prevents unnecessary re-renders by caching the result of the component's render method.import React, { memo } from 'react'; const MemoizedComponent = memo(({ name }) => { console.log('Rendering MemoizedComponent'); return <p>Hello, {name}!</p>; }); export default MemoizedComponent;
-
Server-side rendering (SSR) is the process of rendering React components on the server and sending the generated HTML to the client. This allows search engines and social media crawlers to index the content and improves performance by reducing the time to first meaningful paint. Client-side rendering (CSR), on the other hand, renders React components in the browser using JavaScript.
In SSR, the initial HTML content is sent from the server to the client, which can improve SEO and reduce time to content for users. CSR, on the other hand, sends a minimal HTML file with JavaScript, which then fetches and renders the content in the browser.
-
Code splitting is a technique used to split your code into smaller bundles that can be loaded on demand. This helps reduce the initial bundle size and improve performance by only loading the code that is necessary for the current route or feature. In React, code splitting can be implemented using dynamic imports or
React.lazy()for components.import React, { lazy, Suspense } from 'react'; const LazyLoadedComponent = lazy(() => import('./LazyLoadedComponent')); const CodeSplittingExample = () => ( <Suspense fallback={<div>Loading...</div>}> <LazyLoadedComponent /> </Suspense> ); export default CodeSplittingExample;
-
React Suspense is a feature that allows components to suspend rendering while waiting for some asynchronous data to load. It's used to create better loading experiences in React applications by showing fallback UIs while waiting for data to fetch.
Suspense is often used in conjunction with React.lazy() for lazy loading components and React Concurrent Mode for handling concurrent rendering.
-
React hooks simplify state management and lifecycle management in functional components, making them easier to read and write. Hooks encourage code reuse and better encapsulation of logic. They also enable functional components to have their own state and lifecycle methods, eliminating the need for class components in most cases.
-
Memoization is a technique used to optimize performance by storing the results of expensive function calls and returning the cached result when the same inputs occur again. In React, memoization can be achieved using the
React.memo()higher-order component or theuseMemo()hook to memoize the result of a computation. -
setState()is a method used to update the state of a React component in class components, whileuseState()is a hook used to manage state in functional components.setState()allows you to update multiple state properties at once and provides a callback function for performing actions after the state has been updated, whileuseState()returns a single state variable and a function to update it. -
The
childrenprop in React is a special prop that allows components to accept arbitrary JSX as children. It's useful for creating reusable components that can wrap other components or elements.import React from 'react'; const WrapperComponent = ({ children }) => ( <div className="wrapper"> {children} </div> ); export default WrapperComponent;
-
The
useRef()hook in React returns a mutable ref object whose.currentproperty is initialized to the passed argument (initialValue). It's primarily used to access DOM nodes or React elements directly, or to persist values between renders without causing re-renders.import React, { useRef } from 'react'; const InputWithFocus = () => { const inputRef = useRef(); const focusInput = () => { inputRef.current.focus(); }; return ( <div> <input ref={inputRef} type="text" /> <button onClick={focusInput}>Focus Input</button> </div> ); }; export default InputWithFocus;
-
React's strict mode is a feature that helps detect potential problems in your code by highlighting unsafe lifecycles, legacy string ref usage, and more. It's used to identify and fix common mistakes in React applications. Strict mode can be enabled by wrapping your application in a
<React.StrictMode>component or adding{ strictMode: true }to the ReactDOM.render options. -
React Router is a popular library for managing client-side routing in React applications. It enables navigation between different views (components) based on URL changes, providing a seamless single-page application (SPA) experience.
- Benefits:
- Simplifies navigation management: Defines routes and components to render for each route.
- Improved SEO: Supports server-side rendering (SSR) for better search engine indexing.
- User experience: Smooth transitions between views with minimal full page reloads.
- Code organization: Encourages component-based routing for better maintainability.
- Benefits:
-
Both are top-level components that provide routing context for your app.
BrowserRouter(default): Uses the History API for cleaner URLs that don't include a hash (#). Requires server-side configuration for proper initial page load (e.g., setting up a catch-all route to serve the index.html).HashRouter: Fallback option for browsers that don't support the History API. Uses a hash fragment (#) in the URL, which might be less visually appealing.
import { BrowserRouter, HashRouter } from 'react-router-dom'; function App() { return ( <div> {/* Using BrowserRouter for clean URLs */} <BrowserRouter> {/* Your routes and components here */} </BrowserRouter> {/* Using HashRouter as a fallback */} <HashRouter> {/* Alternative routes for unsupported browsers */} </HashRouter> </div> ); }
-
Routes are defined using the
Routecomponent from React Router. It takes two main props:path: A string representing the URL pattern (e.g.,/about,/products/:id). Wildcards (*) can be used for dynamic segments.component: The React component to render when the URL matches thepath.
import { Route, Routes } from 'react-router-dom'; import Home from './Home'; import About from './About'; import ProductDetails from './ProductDetails'; function App() { return ( <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/products/:productId" element={<ProductDetails />} /> </Routes> ); }
-
Dynamic route segments captured with wildcards (
:inpath) can be accessed as props within the component. To access these parameters:- Use the
useParamshook from React Router. - Destructure the desired parameter from the returned object.
import { useParams } from 'react-router-dom'; function ProductDetails() { const { productId } = useParams(); // Access the parameter return ( <div> <h1>Product Details for ID: {productId}</h1> {/* Fetch or display product details based on productId */} </div> ); }
- Use the
-
Nested routing allows you to define hierarchical routes within a parent route. Use nested
Routecomponents to create sub-routes within a specific path.import { Route, Routes } from 'react-router-dom'; import Home from './Home'; import About from './About'; import Products from './Products'; import ProductDetails from './ProductDetails'; function App() { return ( <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/products"> <Route index element={<Products />} /> {/* Sub-route for /products */} <Route path=":productId" element={<ProductDetails />} /> {/* Nested route for product details */} </Route> </Routes> ); }
-
React Router provides programmatic navigation using the
useNavigatehook (orhistoryobject in older versions). This allows you to navigate to different routes from within components using JavaScript code.import { useNavigate } from 'react-router-dom'; function Login() { const navigate = useNavigate(); const handleLogin = () => { // Perform login logic navigate('/dashboard'); // Programmatic navigation to dashboard }; return ( <div> <form onSubmit={handleLogin}> {/* Login form */} </form> </div> ); }
-
By default, anchor (
<a>) tags withinLinkcomponents from React Router will trigger a full page reload. To prevent this and leverage client-side routing, set thetoprop instead of thehrefprop.import { Link } from 'react-router-dom'; function Navigation() { return ( <nav> <Link to="/">Home</Link> <Link to="/about">About</Link> <Link to="/products">Products</Link> </nav> ); }
- Implement protected routes to restrict access to certain portions of your application based on authentication status. You can achieve this using techniques like:
- Conditional rendering: Check if a user is logged in before rendering the protected route component.
- Higher-order components (HOCs): Wrap protected routes with an HOC that verifies authentication and redirects if needed.
- Third-party libraries: Consider libraries like
react-router-dom/privateRoutesfor simplified protected route handling.
- Conditional rendering: Check if a user is logged in before rendering the protected route component.
-
Lazy loading improves initial load times by delaying the loading of components until they're actually needed. React Router provides the
Suspensecomponent and a dynamic import syntax (import('./MyComponent')) to achieve lazy loading.const About = React.lazy(() => import('./About')); function App() { return ( <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={ <Suspense fallback={<div>Loading...</div>}> <About /> </Suspense> } /> </Routes> ); }
-
Query parameters (key-value pairs after the
?in a URL) can be accessed using theuseLocationhook from React Router. Destructure thesearchproperty to parse the query string.import { useLocation } from 'react-router-dom'; function SearchResults() { const location = useLocation(); const queryParams = new URLSearchParams(location.search); const searchTerm = queryParams.get('q'); return ( <div> <h1>Search results for "{searchTerm}"</h1> {/* Display search results based on the term */} </div> ); }
- Several strategies can enhance performance:
- Lazy loading (already discussed).
- Memoization: Use
React.memoor similar techniques to prevent unnecessary re-renders of route components. - Code splitting: Break down your application code into smaller bundles to reduce initial load times.
-
Redux is a predictable state container for JavaScript applications. It provides a centralized store to manage application state, promoting consistency and easier debugging. React Redux is a library that connects React components to the Redux store, enabling components to access and update state in a controlled manner.
// actions.js export const increment = (value) => ({ type: 'INCREMENT', value }); export const decrement = (value) => ({ type: 'DECREMENT', value }); // reducers.js const counterReducer = (state = { count: 0 }, action) => { switch (action.type) { case 'INCREMENT': return { count: state.count + action.value }; case 'DECREMENT': return { count: state.count - action.value }; default: return state; } }; export default counterReducer; // App.js (using connect from react-redux) import React from 'react'; import { connect } from 'react-redux'; import { increment, decrement } from './actions'; const Counter = ({ count, onIncrement, onDecrement }) => ( <div> <h1>Count: {count}</h1> <button onClick={onIncrement}>Increment</button> <button onClick={onDecrement}>Decrement</button> </div> ); const mapStateToProps = (state) => ({ count: state.counter.count }); const mapDispatchToProps = { onIncrement: increment, onDecrement: decrement }; export default connect(mapStateToProps, mapDispatchToProps)(Counter);
-
- A UI component dispatches an action (a plain JavaScript object describing the intent) to the Redux store.
- The store passes the action to all registered reducers (pure functions that handle state updates).
- Reducers, based on the action type, update a slice of the application state and return the new state.
- The store holds the updated state, and connected components re-render based on the changed state they're subscribed to.
- Use the
connectfunction fromreact-redux. It takes two main arguments:mapStateToProps: A function that maps a slice of the Redux store state to component props.mapDispatchToProps: A function that maps dispatch functions (to trigger actions) to component props.
-
mapStateToProps: Connects a portion of the Redux store state to a component's props.mapDispatchToProps: Provides dispatch functions as props, enabling components to trigger actions.
- Benefits:
- Improved state management: Centralized, predictable state updates.
- Easier debugging: Consistent state changes simplify debugging.
- Testability: Pure reducers and isolated components enhance unit testing.
- Scalability: Redux patterns can scale well for complex applications.
- Drawbacks:
- Increased boilerplate: Setting up Redux store, reducers, actions, and connecting components can add complexity.
- Performance overhead: Maintaining a central store might introduce a slight overhead, especially for simpler apps.
- Redux doesn't handle asynchronous operations directly. Popular middleware libraries like
redux-thunkorredux-sagacan be used:- Redux Thunk: Allows dispatching functions that can contain asynchronous logic (e.g., using
fetch). - Redux Saga: More complex middleware for managing complex asynchronous workflows with generators and cancellation features.
- Redux Thunk: Allows dispatching functions that can contain asynchronous logic (e.g., using
-
- Store user authentication state (e.g.,
isLoggedIn, user data) in the Redux store. Dispatch actions to update the state based on login, logout, or fetching user information. Consider using libraries likeredux-persistto persist authentication state across browser refreshes.
- Store user authentication state (e.g.,
The questions provided in this repository are the summary of frequently asked questions across numerous companies. We cannot guarantee that these questions will actually be asked during your interview process, nor should you focus on memorizing all of them. The primary purpose is for you to get a sense of what some companies might ask — do not get discouraged if you don't know the answer to all of them — that is ok!
Good luck with your interview 😊