Exploring Reactjs Library

Why this another article around React?Permalink

There is no dearth of React tutorial and guide on the internet then why this article?

The learning process can be quite diverse, and people come from different backgrounds and experiences. Some may prefer a more structured approach, while others may enjoy exploring concepts through Q&A formats. This article aims to provide a concise introduction to React.js, also known as React, by exploring the most common questions people have about this popular JavaScript library. Whether you’re a beginner looking to learn the basics or an experienced developer wanting to know more about React, this article should provide you with a solid foundation.

History Behind ReactPermalink

When Facebook introduced React in 2013, it wasn’t just another JavaScript library—it was a response to major challenges in building complex web applications.

This was the time when

• Facebook was rapidly growing, and its News Feed and chat system required frequent updates.
• Existing JavaScript frameworks (like jQuery, Backbone.js) led to spaghetti code with messy DOM manipulations.
• As the UI became more interactive, keeping track of state changes became a nightmare.

The Problem was:

• Updating the DOM was slow
• State management was hard
• Code became difficult to maintain
• Re-rendering the entire UI was inefficient*

Facebook was exploring better way to build UI that updates efficiently.

Before React

• Frameworks like AngularJS used two-way data binding, where changes in the UI automatically updated the model and vice versa, it led to performance issues in large applications.
• Because of too many dependencies, a small changes in one part of the UI triggered unexpected updates elsewhere. Developers struggled debug and track how changes propagated.
• JavaScript frameworks manipulated the real DOM directly, which was slow and expensive. Every small UI update caused repaints and reflows, slowing down applications.
• Developers used template-based approaches (like Handlebars, AngularJS), but they weren’t reusable. UI components were difficult to share and maintain.
• Facebook’s engineering teams were working on multiple features simultaneously. As the codebase grew, merging and maintaining UI code became difficult.
• Facebook developers Jordan Walke and his team experimented with a functional approach to UI development. They built React as an internal tool for the Facebook Ads team. It was so effective that Facebook decided to open-source it in 2013.

They introduce

• a one-way data flow where updates are predictable.
• React introduced a Virtual DOM, a lightweight copy of the real DOM.
• UI was broken into reusable components (buttons, forms, modals, etc.).
• Components managed their own state, making the code cleaner and modular.
• A UI library that allows teams to work independently while maintaining a consistent experience.

Introductory QuestionsPermalink

What it is:Permalink

React is a library, not a framework, meaning it provides tools and functions for building user interfaces, but it doesn’t dictate how your application should be structured.

What are the Key Features of React?Permalink

• Component-Based: React applications are built using reusable components, which are independent and self-contained UI blocks. Virtual DOM: React uses a virtual DOM to efficiently update the user interface, minimizing direct manipulation of the actual DOM for better performance.
• JSX: React uses JSX, a syntax extension to JavaScript that allows you to write HTML-like structures within your JavaScript code, making it easier to define UI elements.
• Declarative: React encourages a declarative approach to UI development, meaning you describe what the UI should look like, and React handles the rendering and updates.
• Open Source: React is an open source library, developed and maintained by Facebook and a large community of developers. Use Cases:
• Single-Page Applications (SPAs): React is well-suited for building SPAs, where the entire application runs within a single web page, and user interactions update the UI without full page reloads.
• Mobile Applications: React Native, a framework built on React, allows developers to build native mobile apps (Android and iOS) using React’s component-based architecture.
• Web Applications: React is widely used for building complex web applications with dynamic and interactive user interfaces. Why it’s popular:
• Performance: React’s virtual DOM and efficient update mechanisms lead to fast and responsive applications.
• Reusability: Components can be easily reused across different parts of an application, promoting code maintainability and efficiency.
• Large Community: React has a large and active community, providing ample resources, libraries, and support.
• Learnability: React’s component-based approach and declarative nature make it relatively easy to learn and use. Alternatives:
• While React is a popular choice, other JavaScript libraries and frameworks for building user interfaces include Angular and Vue.js.

Beginner-Level QuestionsPermalink

What is React?Permalink

React is a JavaScript library for building interactive user interfaces, primarily using components.

Who created React?Permalink

React was created by Facebook in 2013.

What is JSX?Permalink

JSX is a syntax extension for JavaScript that looks like HTML and is used in React to define UI elements.

What is a component in React?Permalink

A component is a reusable piece of UI, like a button or a card, written as a JavaScript function or class.

What’s the difference between functional and class components?Permalink

Functional components are simple JavaScript functions, while class components are ES6 classes with lifecycle methods and state.

How do you create a functional component?Permalink

function MyComponent() {
    return <div>Hello, React!</div>;
}

What is the purpose of render() in a class component?Permalink

It defines what the component will display on the screen.

What are props in React?Permalink

Props (short for properties) are read-only data passed from a parent component to a child component.

How do you pass props to a component?Permalink

<MyComponent name="John" />

What is the virtual DOM?Permalink

The virtual DOM is a lightweight copy of the real DOM that React uses to optimize updates.

Intermediate-Level QuestionsPermalink

What is state in React?Permalink

State is a built-in object in React components that holds dynamic data and triggers re-renders when updated.

How do you initialize state in a functional component?Permalink

Use the useState hook:

const [count, setCount] = useState(0);

What does the useState hook do?Permalink

It adds state to functional components and returns the current state value and a function to update it.

How do you update state?Permalink

Call the state updater function, e.g., setCount(count + 1).

What is the useEffect hook used for?Permalink

It handles side effects in functional components, like data fetching or subscriptions.

How do you write a useEffect hook?Permalink

useEffect(() => {
    console.log("Component mounted");
}, []);

What’s the role of the dependency array in useEffect?Permalink

It tells React when to re-run the effect; an empty array ([]) means it runs only once on mount.

What are event handlers in React?Permalink

Functions that respond to user actions, like clicks, e.g., onClick={() => alert("Clicked")}.

What is conditional rendering?Permalink

Displaying different UI based on conditions, e.g., {isLoggedIn ? <UserDashboard /> : <Login />}.

How do you loop through a list in React?Permalink

Use map():

items.map(item => <li key={item.id}>{item.name}</li>)

Advanced-Level QuestionsPermalink

What are React hooks?Permalink

Hooks are functions that let you use state and other React features in functional components.

What is the useContext hook?Permalink

It provides a way to access context (shared data) without prop drilling.

How do you create a custom hook?Permalink

Write a function that uses built-in hooks:

function useCustomHook() {
    const [value, setValue] = useState(0);
    return [value, setValue];
}

What is prop drilling?Permalink

Passing props through multiple layers of components to reach a deeply nested child.

How can you avoid prop drilling?Permalink

Use the Context API or state management libraries like Redux.

What is the Context API?Permalink

A React feature to share global data (e.g., themes) across components without passing props manually.

What is a higher-order component (HOC)?Permalink

An HOC is a function that takes a component and returns a new component with added functionality.

How do you write an HOC?Permalink

function withLogging(WrappedComponent) {
    return function(props) {
    console.log("Rendering", props);
    return <WrappedComponent {...props} />;
    };
}

What is the purpose of React.memo?Permalink

It memoizes a component to prevent unnecessary re-renders if props don’t change.

What are controlled components?Permalink

Form elements whose value is controlled by React state, e.g., <input value={value} onChange={handleChange} />.

What are uncontrolled components?Permalink

Form elements that manage their own state via the DOM, accessed with refs.

What is the useRef hook?Permalink

It creates a mutable reference that persists across renders, often used to access DOM elements.

How do you optimize React performance?Permalink

Use React.memo, lazy loading, code splitting, and avoid unnecessary re-renders.

What is lazy loading in React?Permalink

Loading components only when needed using React.lazy and Suspense:

const LazyComponent = React.lazy(() => import('./Component'));

What is the purpose of keys in React lists?Permalink

Keys help React identify which items have changed, added, or removed in a list.

What is reconciliation in React?Permalink

The process where React compares the virtual DOM with the real DOM to determine updates.

What is a portal in React?Permalink

A way to render children into a DOM node outside the parent hierarchy, using ReactDOM.createPortal.

What is the useReducer hook?Permalink

A hook for managing complex state logic, similar to Redux reducers.

How do you handle forms in React?Permalink

Use controlled components with state or libraries like Formik for complex forms.

What is server-side rendering (SSR) in React?Permalink

Rendering React components on the server to send HTML to the client, improving SEO and performance.

What is the difference between SSR and static site generation (SSG)?Permalink

SSR renders pages on each request; SSG pre-renders pages at build time.

What is React Router?Permalink

A library for handling navigation and routing in React applications.

How do you fetch data in React?Permalink

Use fetch or axios inside useEffect or a custom hook.

What is Redux?Permalink

A state management library for predictable state updates across a React app.

What are React fragments?Permalink

A way to group elements without adding extra nodes to the DOM, e.g., <><div>1</div><div>2</div></>.

What is the difference between useEffect and useLayoutEffect?Permalink

useEffect runs after rendering; useLayoutEffect runs synchronously before painting.

How do you test React components?Permalink

Use tools like Jest and React Testing Library to write unit and integration tests.

What is a suspense component?Permalink

A feature to handle loading states, e.g., <Suspense fallback={<Loading />}>.

What are error boundaries?Permalink

Components that catch JavaScript errors in their child tree and display a fallback UI.

How do you implement an error boundary?Permalink

Use a class component with componentDidCatch and static getDerivedStateFromError.