Mastering React Interviews

ගොඩක් අය මේ දවස් වල interview වලට focus කරන නිසා මට හිතුනා ඒකට help එකක් විදියට interview questions and answers blog series එකක් කරන්න. ඒකෙ පලවෙනි step එක විදියට අපි react වලින් පටන් ගමු.

1. What is ReactJS and how does it work?

React කියන්නෙ interactive UI හදන්න use කරන powerful javascript library එකක්. මේකෙ තියෙන්නෙ declarative and component base approach එකක්. Components කියන්නෙ small and self contained unit එකක්. මේවා එකතු කරලා අපිට complex UI හදන්න පුලුවන්.

React app එකක් run වෙද්දි UI එකේ virtual representation එකක් memory එකේ හැදෙනවා. Virtual DOM කියන්නෙ මේකට. සරලවම මේක actual DOM එකේ සේරම elements සහ attributes තියෙන javascript object එකක්. අපේ react app එකේ state එකක් change වෙද්දි ආයිත් අලුත් VDOM එකක් හැදෙනවා. ඒ VDOM එක diffing algorithm එකක් මගින් state change එක වෙන්න කලින් තිබුන VDOM එකත් එක්ක compare කරලා differences අදුනගන්නවා. ඊට පස්සෙ ඒවට අනුව actual DOM එක update කරනවා.

2. What is the difference between Shadow DOM and Virtual DOM ?

Virtual DOM කියන්නෙ memory එකේ තියෙන actual DOM එකේ lightweight copy එකක්. අපි මොන්වහරි change එකක් කාරම ඒක මුලින්ම apply වෙන්නෙ VDOM එකට. ඊට පස්සෙ actual DOM එකට ඒ update එක කරන්න පුලුවන් efficient ම විදිය calculate කරලා තමයි actual DOM එකේ update එක කරන්නෙ. එතකොට මුලු DOM එකම re-render වෙන්නෙ නෑ. React වල වගේම Vue JS වලත් මේක තියෙනවා.

Shadow DOM එක කරන්නෙ web components වල structure සහ styles encapsulate කරන එක. Primarily මේක design කරලා තියෙන්නෙ web components වල variables සහ CSS scoping කරන්න. Angular වල මේ shadow DOM එක use වෙනවා.

3. Explain the reconciliation process.

Reconciliation process කියන්නෙ react library එක මගින් browser DOM එක update කරන process එක. මේ process එක efficient සහ fast වෙන්න diffing algorithm එකක් use කරනවා. අපි මොන්වහරි change එකක් කරාම අලුත් VDOM එකක් create වෙලා diffing algorithm එක මගින් කලින් තිබුන VDOM එකත් එක්ක compare කරනවා. ඒවගේම මේ algorithm එක මගින් UI update එක කරන්න පුලුවන් efficient ම විදියත් determine කරනවා. ඊට පස්සෙ DOM එකේ change වෙන්න ඕන nodes බලලා ඒ nodes විතරක් change කරනවා.

4. What is the meaning of component in react ?

component එකක් කියන්නෙ reusable UI piece එකක්. Component එකක් ඇතුලේ elements එකක් හෝ කිහිපයක් තියෙන්න පුලුවන්. Functional and Class components කියලා වර්ග දෙකක් තියෙනවා. Component එකක් කියන්නෙ input data විදියට props ගන්න, internal state එකක් maintain කරන rendering and behavior එකට අදාලා code encapsulate වෙලා තියෙන reusable unit එකක්.

5. What is state and props in React ?

Component එකේ internal data manage කරන්න අපි states use කරනවා. මේවා mutable ඒ කියන්නෙ states change කරන්න පුලුවන්. State change උනාම component re-rendering process එක trigger වෙනවා.

Props කියන්නෙ component එක තුලට data එවන්න use කරන mechanism එකක්. මේව immutable. Component එකේ reusability එක සහ customizability එකට වැදගත් වෙනවා.

6. What are pure components and React.memo() ?

Pure components කියන්නෙ shouldComponentUpdate() කියන lifecycle method එක shallow prop and state comparison එකක් එක්ක automatically implement කරන components වර්ගයක්. ( lifecycle methods ගැන ඉස්සරහදි බලමු )

මේකෙ තේරුම තමයි pure components re-render වෙන්නෙ props or state change එකක් උනොත් විතරයි. Unnecessary re-renders නවත්තලා performance වැඩි කරන්න මේක use කරනවා class component වලදි.

import React, { PureComponent, useState } from 'react';

// PureComponent that receives props and renders them
class CounterDisplay extends PureComponent {
  render() {
    console.log('CounterDisplay re-rendered');
    return <h2>Counter Value: {this.props.counter}</h2>;
  }
}

// Parent Component
function App() {
  const [counter, setCounter] = useState(0);
  const [anotherState, setAnotherState] = useState(0);

  const incrementCounter = () => {
    setCounter(counter + 1);
  };

  const incrementAnotherState = () => {
    setAnotherState(anotherState + 1);
  };

  return (
    <div>
      <h1>Counter App</h1>
      <CounterDisplay counter={counter} />
      <button onClick={incrementCounter}>Increment Counter</button>
      <button onClick={incrementAnotherState}>Increment Another State</button>
    </div>
  );
}

export default App;

Explanation

CounterDisplay Component (PureComponent)

• CounterDisplay extends PureComponent instead of Component.
• Implements the render method to display the counter value.
• Because CounterDisplay is a PureComponent, it will only re-render if the counter prop changes.
• The console.log statement in the render method helps us see when the component re-renders.

App Component

• Manages two pieces of state: counter and anotherState using the useState hook.
• Defines two functions: incrementCounter and incrementAnotherState to update the respective states.
• Renders CounterDisplay and passes the counter state as a prop.
• Renders two buttons that call the respective increment functions when clicked.

Behavior

• Clicking the “Increment Counter” button will update the counter state, causing the CounterDisplay to re-render.
• Clicking the “Increment Another State” button will update the anotherState, but because CounterDisplay is a PureComponent and its counter prop hasn't changed, it will not re-render.

මේ behavior එකම functional components වල ගන්න අපි React.memo() use කරනවා. මේක higher order function එකක්. Props change උනොත් විතරයි component එක re-render වෙන්නෙ. එකම prop එක නැවත නැවතත් ආවට re-render වෙන්නෙ නෑ.

import React, { useState, memo } from 'react';

// Functional component that receives props and renders them
const CounterDisplay = memo(({ counter }) => {
  console.log('CounterDisplay re-rendered');
  return <h2>Counter Value: {counter}</h2>;
});

// Parent Component
function App() {
  const [counter, setCounter] = useState(0);
  const [anotherState, setAnotherState] = useState(0);

  const incrementCounter = () => {
    setCounter(counter + 1);
  };

  const incrementAnotherState = () => {
    setAnotherState(anotherState + 1);
  };

  return (
    <div>
      <h1>Counter App</h1>
      <CounterDisplay counter={counter} />
      <button onClick={incrementCounter}>Increment Counter</button>
      <button onClick={incrementAnotherState}>Increment Another State</button>
    </div>
  );
}

export default App;

Explanation

CounterDisplay Component (memo)

• CounterDisplay is a functional component that displays the counter value.
• Wrapped with React.memo to memoize it.
• The console.log statement in the function helps us see when the component re-renders.
• React.memo performs a shallow comparison of the props, and the component only re-renders if the counter prop changes.

App Component

• Manages two pieces of state: counter and anotherState using the useState hook.
• Defines two functions: incrementCounter and incrementAnotherState to update the respective states.
• Renders CounterDisplay and passes the counter state as a prop.
• Renders two buttons that call the respective increment functions when clicked.

Behavior

• Clicking the “Increment Counter” button will update the counter state, causing the CounterDisplay to re-render.
• Clicking the “Increment Another State” button will update the anotherState, but because CounterDisplay is memoized with React.memo and its counter prop hasn't changed, it will not re-render.

7. What are the different phases of the component lifecycle ?

React වල mounting, updating and unmounting කියලා phases තුනක් තියෙනවා. මේ phases වලදි specific lifecycle methods call වෙනවා. අපි බලමු ඒ lifecycle methods ගැන.

— Mounting Phase —

constructor : component එකක් create වෙද්දි මුලින්ම call වෙන්නෙ මේක. State initialize කරන්න, event handlers bind කරන්න මේක use කරන්න පුලුවන්.

getDerivedStateFromProps : Elements DOM එකට Render වෙන්න කලින් මේ method එක call වෙනවා. Initial props වලින් states initialize කරන්න මේ method එක use කරන්න පුලුවන්.

render : Component එක render කරන්නෙ මේ method එකෙන්.

componentDidMount : component එක render උනාට පස්සෙ මේ method එක call වෙනවා. Component එක mount උනාට පස්සෙ කරන්න ඕන task කරගන්න මේක use කරන්න පුලුවන්. Ex: Data fetching

import React, { Component } from 'react';

class LifecycleDemo extends Component {
  constructor(props) {
    super(props);
    // Initialize state
    this.state = {
      data: null,
    };
    console.log('Constructor: Component is being initialized');
  }

  static getDerivedStateFromProps(props, state) {
    // Sync state with props
    console.log('getDerivedStateFromProps: Syncing state with props');
    return null; // Return an object to update state or null to do nothing
  }

  componentDidMount() {
    // Called immediately after a component is mounted
    console.log('componentDidMount: Component has mounted');
    // Simulate a data fetch
    setTimeout(() => {
      this.setState({ data: 'Hello, world!' });
    }, 2000);
  }

  render() {
    console.log('Render: Component is rendering');
    return (
      <div>
        <h1>Lifecycle Methods in Mounting Phase</h1>
        <p>{this.state.data ? this.state.data : 'Loading...'}</p>
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div>
        <LifecycleDemo />
      </div>
    );
  }
}

export default App;

Explanation

constructor(props)

• Called when the component is being initialized.
• Initializes the state and binds methods if necessary.
• Logs a message to the console.

static getDerivedStateFromProps(props, state)

• Called right before rendering, both on the initial mount and on subsequent updates.
• Used to sync state with props.
• Returns an object to update the state or null to do nothing.
• Logs a message to the console.

render()

• Required method that returns the JSX to render to the DOM.
• Called during the mounting phase and whenever the component’s state or props change.
• Logs a message to the console.

componentDidMount()

• Called immediately after the component is mounted (inserted into the tree).
• Ideal for making network requests, setting up subscriptions, or initiating side effects.
• Logs a message to the console.
• Simulates a data fetch by updating the state after 2 seconds.

Behavior

When the LifecycleDemo component is initialized and mounted, you'll see the logs in the console in the following order:

1. “Constructor: Component is being initialized”
2. “getDerivedStateFromProps: Syncing state with props”
3. “Render: Component is rendering”
4. “componentDidMount: Component has mounted”

The component displays “Loading…” initially. After 2 seconds, the state is updated with the fetched data, causing a re-render to display “Hello, world!”.

— Updating phase —

getDerivedStateFromProps : Component එක update වෙද්දි මුලින්ම call වෙන්නෙ මේක. Props වල changes වලට අනුව state change කරන්න use කරන්න පුලුවන්.

shouldComponentUpdate : මේකෙදි rendering process එක continue වෙන්න ඕනද නැද්ද කියලා boolean එකක් return කරන්න පුලුවන්. Default මේකෙන් true return වෙනවා.

render : Component එක render කරන්නෙ මේ method එකෙන්.

getSnapshotBeforeUpdate : මේ method එකෙන් අපිට component එක update වෙන්න කලින් තිබුන props and states access කරන්න පුලුවන්. ඒ වගේම අපි මේ method එක use කරනවනම් අනිවාරෙන්ම componentDidUpdate method එක define කරන්න ඕන.

componentDidUpdate : Component එක update උනාට පස්සෙ මේ method එක call වෙනවා. Update උනාට පස්සෙ execute කරන්න ඕන දේවල් මේකෙ කරන්න පුලුවන්.

import React, { Component } from 'react';

class LifecycleDemo extends Component {
  constructor(props) {
    super(props);
    // Initialize state
    this.state = {
      data: 'Initial Data',
      counter: 0,
    };
    console.log('Constructor: Component is being initialized');
  }

  static getDerivedStateFromProps(props, state) {
    // Sync state with props
    console.log('getDerivedStateFromProps: Syncing state with props');
    return null; // Return an object to update state or null to do nothing
  }

  shouldComponentUpdate(nextProps, nextState) {
    // Determine if the component should re-render
    console.log('shouldComponentUpdate: Should component re-render?');
    return true; // Return false to prevent re-rendering
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Capture some information from the DOM before it is potentially changed
    console.log('getSnapshotBeforeUpdate: Capturing snapshot before update');
    return null; // Return a value to pass to componentDidUpdate
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // Perform operations after the component has been updated
    console.log('componentDidUpdate: Component has updated');
  }

  incrementCounter = () => {
    this.setState((prevState) => ({ counter: prevState.counter + 1 }));
  };

  updateData = () => {
    this.setState({ data: 'Updated Data' });
  };

  render() {
    console.log('Render: Component is rendering');
    return (
      <div>
        <h1>Lifecycle Methods in Updating Phase</h1>
        <p>Data: {this.state.data}</p>
        <p>Counter: {this.state.counter}</p>
        <button onClick={this.incrementCounter}>Increment Counter</button>
        <button onClick={this.updateData}>Update Data</button>
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div>
        <LifecycleDemo />
      </div>
    );
  }
}

export default App;

Explanation

static getDerivedStateFromProps(props, state)

• Called right before rendering the component when new props or state are received.
• Used to sync state with props.
• Logs a message to the console.

shouldComponentUpdate(nextProps, nextState)

• Called before rendering when new props or state are received.
• Returns true or false to determine whether the component should re-render.
• Logs a message to the console.

getSnapshotBeforeUpdate(prevProps, prevState)

• Called right before the DOM is updated.
• Can capture information from the DOM before it potentially changes (e.g., scroll position).
• Logs a message to the console.
• Returns a value to be passed to componentDidUpdate.

componentDidUpdate(prevProps, prevState, snapshot)

• Called immediately after the component’s updates are flushed to the DOM.
• Can perform side effects or operations based on the previous props and state.
• Logs a message to the console.

render()

• Required method that returns the JSX to render to the DOM.
• Called during the updating phase whenever the component’s state or props change.
• Logs a message to the console.

Behavior

When the LifecycleDemo component's state is updated by clicking the "Increment Counter" or "Update Data" buttons, you'll see the logs in the console in the following order:

1. “getDerivedStateFromProps: Syncing state with props”
2. “shouldComponentUpdate: Should component re-render?”
3. “Render: Component is rendering”
4. “getSnapshotBeforeUpdate: Capturing snapshot before update”
5. “componentDidUpdate: Component has updated”

• Clicking the “Increment Counter” button updates the counter state.
• Clicking the “Update Data” button updates the data state.

This example demonstrates the key lifecycle methods during the updating phase and their typical usage in a React class component.

— Unmounting phase —

componentWillUnmount : Component එක unmount වෙද්දි මේ method එක call වෙනවා. Cleanup processes කරන්න මේක හොදයි.

import React, { Component } from 'react';

class Timer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      seconds: 0,
    };
    console.log('Constructor: Timer component is being initialized');
  }

  componentDidMount() {
    console.log('componentDidMount: Timer component has mounted');
    this.interval = setInterval(() => {
      this.setState((prevState) => ({ seconds: prevState.seconds + 1 }));
    }, 1000);
  }

  componentWillUnmount() {
    console.log('componentWillUnmount: Timer component is about to unmount');
    clearInterval(this.interval);
  }

  render() {
    console.log('Render: Timer component is rendering');
    return (
      <div>
        <h1>Timer</h1>
        <p>Seconds: {this.state.seconds}</p>
      </div>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showTimer: true,
    };
  }

  toggleTimer = () => {
    this.setState((prevState) => ({ showTimer: !prevState.showTimer }));
  };

  render() {
    return (
      <div>
        <h1>Unmounting Lifecycle Example</h1>
        <button onClick=

Explanation

constructor(props)

• Initializes the state with seconds: 0.
• Logs a message to the console.

componentDidMount()

• Called immediately after the component is mounted.
• Starts an interval that updates the seconds state every second.
• Logs a message to the console.

componentWillUnmount()

• Called right before the component is unmounted and destroyed.
• Clears the interval to prevent memory leaks.
• Logs a message to the console.

render()

• Returns the JSX to render to the DOM.
• Logs a message to the console.

Behavior

• The Timer component starts a timer when it is mounted, updating the seconds state every second.
• The App component manages whether the Timer component is shown or hidden with a button.
• Clicking the button toggles the visibility of the Timer component.
• When the Timer component is hidden, the componentWillUnmount method is called, stopping the timer.

8. What are Higher Order Components ?

මේක react වල use කරන්න components වල logic එක reuse කරන්න පුලුවන් design pattern එකක්. මේක function එකක්. මේකට input එකක් විදියට component එකක් pass කරාම ඒ component එකේ තියෙන functionality එක enhance කරලා අලුත් component එකක් return කරනවා. එතකොට අපිට component එකේ code එක change කරන්නෙ නැතුව additional functionality එකක් add කරන්න පුලුවන්.

9. What is context and useContex hook ?

Context කියන්නෙ component tree එක හරහා data pass කරන්න පුලුවන් mechanism එකක්. මේකෙදි props විදියට parent component එකෙන් child එකට pass කරලා යන්නෙ නැතුව data pass කරන්න පුලුවන්. Authenticated user, theme වගේ data හැම component එකටම වගේ pass කරන්න ඕන නිසා මේ විදිය try කරන්න පුලුවන්.

React.createContext function එක use කරලා අපිට context එකක් හදන්න පුලුවන්. එහෙම හදන context object එකේ Provider and Consumer කියලා කොටස් දෙකක් තියෙනවා. අපි context එකට දෙන data, available වෙන්න ඕන components, Provider එකෙන් wrap කරන්න ඕන. එතකොට Consumer එක use කරලා අපිට ඒ data, consume කරන්න පුලුවන්.

අපි useContext hook එක use කරලා functional component වලදි context data consume කරනවා. මේකට context object එකක් arguments විදියට දුන්නම current context value එක return කරනවා.

10. Why should we not update the state directly ?

setState() method එකේ වෙන්නෙ asynchronous operation එකක්. අපි state එක directly update කරාම change එකක් උනා කියලා detect වෙන්නෙ නෑ. ඒක නිසා re-rendering process එකත් වෙන්නෙ නෑ. ඒක නිසා actual state එකයි UI එකේ render වෙලා තියෙන දේවල් අතරෙ inconsistencies ඇති වෙනවා.

11. What is the use of refs, React.createRef and useRef ?

Ref එකක් කියන්නෙ DOM එකේ තියෙන node එකක් නැත්තම් react element එකක් access කරන්න පුලුවන්කම ලබාදෙන object එකක්. Input tag එකක් focus කරන්න, ඒකේ dimensions ගන්න සහ methods access කරන්න වගේ DOM එක imperatively interact කරන්න ඕන වෙනකොට අපිට මේක use කරන්න පුලුවන්.

Class components වලදි අපිට React.createRef() use කරලා ref එකක් හදන්න පුලුවන්. Functional components වලදි useRef hook එක use කරලා ref එකක් හදන්න පුලුවන්. මෙහෙම හදන ref එකක් අපිට ref attribute එක use කරලා react element එකකට attach කරන්න පුලුවන්. එතකොට ref එකේ තියෙන current කියන property එක use කරලා අපිට ඒ attach කරපු element එක access කරන්න පුලුවන්.

12. What are forward refs ?

මේක Parent component එකේ ඉදලා child component එකට ref එකක් pass කරන්න පුලුවන් technique එකක්. Parent component එකේ ඉදලා child component එකේ තියෙන DOM node එකක් access කරන්න ඕන උනාම මේක use වෙනවා. හැබැයි ළඟදි release උන react 19 වල මේ forward ref wrapper එක අයින් කරලා තියෙනවා.

13. What is React Fiber ?

මේක තමයි react 16 වල introduce කරපු අලුත් reconciliation algorithm එක. මේකෙදි reconciliation process එක fibers කියලා හඳුන්වන කුඩා units වලට break down කරනවා. මේ fibers, main thread එක block වෙන්නෙ නැති විදියට prioritize and schedule කරලා execute කරනවා. Complex application වලදි මේ approach එක ගොඩක් efficient.

14. What are uncontrolled components ?

Uncontrolled component වලදි වෙන්නෙ DOM එක මගින් data handle කරන එක. States හරහා data control වීමක් වෙන්නෙ නෑ. Input values access කරන්න refs use කරන්න පුලුවන්. විශාල forms වලදි performance optimize කරන්න අපිට මේක use කරන්න පුලුවන්.

15. What are controlled components ?

Controlled components වල form data handle කරන්නෙ react component එක මගින්. Input values, state වල store කරලා input change වෙද්දි onChange handler එකකින් state update කරනවා.

16. How to apply validation on props in React ?

අපිට මේකට PropTypes කියන npm package එක නැත්තම් Typescript use කරන්න පුලුවන්. (Read the medium article)

Mastering PropTypes in React: A Guide to Type Checking Your Components

17. What is children prop ?

අපේ component එකකට props විදියට child components හෝ elements pass කරන්න පුලුවන් special prop එකක් තමයි children prop එක. මේක use කරලා අපිට content එක customize කරන්න පුලුවන් flexible and reusable component හදන්න පුලුවන්.

18. How do I make an AJAX call in React and when should I don it in the component’s lifecycle ?

අපිට මේකට fetch API එක, Axios package එක හෝ native XMLHttpRequest වගේ methods use කරන්න පුලුවන්.

Class components වලදි අපිට componentDidMount lifecycle method එකත් functional component වලදි empty dependency array එකක් එක්ක useEffect hook එකත් use කරලා component එක first time mount වෙද්දි AJAX call එකක් හදන්න පුලුවන්.

ඒ වගේම අපිට ඒ AJAX call එක cancel කරන්න ඕන නම් class component වලදි componentWillUnmount method එකත් functional component වලදි useEffect hook එකෙන් cleanup function එකක් return කරලත් කරගන්න පුලුවන්.

19. What are React hooks ?

මේක States සහ lifecycle features, functional components වල use කරන්න react 16.8 වල introduce කරපු mechanism එකක්. (Read the medium article)

Exploring the Power of React Hooks: A Comprehensive Guide

20. What are error boundaries ?

මේකෙ functionality එක ටිකක් අපි exception handling වල use කරන catch block එකට සමානයි. අපිට මේක use කරන්න පුලුවන් class component වල විතරයි. මේකෙදි වෙන්නෙ error boundary class එකක් හදලා error handle කරන්න ඕන components, මේ boundary component එකෙන් wrap කරන එක. ඒකෙන් අපිට centralized error handling logic එකක් use කරන්න පුලුවන්. Error log කරන්න, fallback UI එකක් display කරන්න වගේ දේවල් මේකෙන් කරන්න පුලුවන්. (Read the medium article)

Understanding and Using Error Boundaries in React

21. What is the use of react-dom package ?

Browser එකේ DOM එකට react components render කරන්න මේ package එක use වෙනවා. මේකෙන් දෙන methods වලින් DOM එකේ elements create and remove කරන්න, attributes update කරන්න වගේ DOM එකත් එක්ක interact වෙන වැඩ කරන්න පුලුවන්.

22. Can you force a component to re-render without calling setState ?

අපිට react වලින් provide කරන forceUpdate method එක use කරලා states or props change උනේ නැති උනත් component එක re-render කරන්න පුලුවන්.

23. What is the significance of keys in React ?

අපි react වලින් list එකක් වගේ render කරද්දි list items වලදි key attribute එක use කරනවා. මේකෙන් වෙන්නෙ VDOM එකේ තියෙන මේ elements, uniquely identity කරගන්න පුලුවන්. Change, add or remove උන elements identify කරගන්න මේක use කරලා පුලුවන්.

import React, { useState } from 'react';

const ListComponent = () => {
  const [items, setItems] = useState([
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' },
    { id: 3, text: 'Item 3' },
  ]);

  const addItem = () => {
    const newItem = {
      id: items.length + 1,
      text: `Item ${items.length + 1}`
    };
    setItems([...items, newItem]);
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    </div>
  );
};

export default ListComponent;

In this example:

• We have a ListComponent that maintains a list of items in its state.
• Each item in the list has a unique id and some text.
• The addItem function adds a new item to the list.
• The map function is used to render each item in the list inside an <li> element.
• The key prop is set to item.id to uniquely identify each list item.

24. How to optimize performance of react app ?

Code Splitting : Webpack වගේ tool use කරලා අපිට code එක කුඩා chunks වලට කඩන්න පුලුවන්. ඒ වගේම React.lazy() use කරලා අපිට component එකක් අවශ්‍ය උනාම පමනක් load කරන්න පුලුවන්.

Bundle size reduction : Webpack or babel වගේ tools වලින් අපිට JS and CSS files minify and compress කරන්න පුලුවන්.

Lazy loading : Components අවශ්‍ය වෙන විට පමනක් load කරන එක මේකෙන් කරන්න පුලුවන්. එතකොට initial load time එක improve වෙනවා වගේම transfer වෙන data ප්‍රමාණයත් අඩු වෙනවා.

Image optimization : Images compress කරලා සහ meta data remove කරලා අපිට size එක අඩු කරගන්න පුලුවන්.

Memoization : React.memo() or Pure Components use කරලා අපිට components memoize කරන්න පුලුවන්. ඒකෙන් props and state changes වලදි වෙන අනවශ්‍ය re-renders අඩු කරගන්න පුලුවන්.

Virtualization : දිග list වගේ එකක් render කරද්දි react-virtualized වගේ package එකක් use කරලා display එකේ visible වෙන items ටික පමනක් render කරන්න පුලුවන්.

Code profiling : React dev tools, chrome dev tools වගේ tools use කරලා අපිට performance bottlenecks, memory leaks , slow component වගේ දේවල් identify කරගන්න පුලුවන්.

Using web workers for CPU extensive tasks : Web workers use කරලා අපිට යම් script එකක් web application එකේ background thread එකක execute කරන්න පුලුවන්. එතකොට main thread එක block වෙන්නෙ නෑ. UI එක seamlessly run කරන්න පුලුවන්.

25. What is the StrictMode component and why would you use it ?

මේ component එක use කරල අපේ application එකේ තියෙන deprecated lifecycle methods, legacy patterns, සමහර issues identify කරගන්න පුලුවන්. අපේ application එක current best practices follow කරනවද කියලා idea එකක් ගන්න පුලුවන්.

26. What is the difference between a presentational component and a container component ?

Presentational component නැත්තම් Dumb component focus කරන්නෙ UI එක සහ data presentation කරන එක ගැන. Container component නැත්නම් Smart component, data manage වෙන විදිය සහ presentational component වලට data provide කරන එක focus කරනවා.

27. What is a react portal ?

React portal use කරලා normal component hierarchy එකෙන් පිටතින් අපිට component render කරන්න පුලුවන්. ඒ කියන්නෙ අපේ තියෙන parent component එකට පිටතින් component render වෙනවා. Modal එකක් වගේ display කරන්න ඕන උනාම අපේ තියෙන content එකට උඩින් ඒක පෙනන්න ඕන. මේ වගේ වැඩ වලදි portal use කරන්න පුලුවන්. (Read the medium article)

Mastering Portals in React