20+ Sunrise Petroleum Interview Questions and Answers

Implementing dark mode in an application involves changing the color scheme to darker tones for better visibility in low light environments.

• Use CSS variables to define color schemes for light and dark modes

• Toggle between light and dark mode using a state variable in React

• Apply the appropriate color scheme based on the selected mode

• Allow users to switch between light and dark mode using a toggle button

React Query is a library for managing server state in React applications, while Redux is a state management library for managing client-side state.

• React Query is specifically designed for managing server state, making it easier to fetch, cache, and update data from APIs.

• Redux is a more general-purpose state management library that can be used for managing client-side state in a predictable way.

• React Query provides built-in caching, pagination, and refetching capabilities, whi...read more

Virtual DOM is a lightweight copy of the actual DOM that React uses to improve performance by minimizing direct manipulation of the actual DOM.

• Virtual DOM is a representation of the actual DOM in the form of a lightweight copy.

• When changes are made to the virtual DOM, React compares it with the actual DOM to identify the minimal number of changes needed.

• This process helps in optimizing performance by reducing direct manipulation of the actual DOM.

• Example: When a component's s...read more

ES6 features are modern JavaScript syntax enhancements that make code more concise and readable.

• Arrow functions for more concise syntax: const add = (a, b) => a + b;

• Let and const for block-scoped variables: let x = 5; const y = 10;

• Template literals for string interpolation: const name = 'Alice'; console.log(`Hello, ${name}!`);

• Destructuring assignment for easily extracting values from objects or arrays: const { firstName, lastName } = person;

• Spread syntax for easily copying ar...read more

ReactJS is popular for its virtual DOM, component-based architecture, and strong community support.

• React's virtual DOM allows for efficient updates and improved performance.

• Component-based architecture promotes reusability and maintainability of code.

• React has a large and active community, providing extensive resources and support.

• React's JSX syntax makes it easier to write and understand code compared to other frameworks.

Reconciliation in React is the process of updating the DOM to match the virtual DOM.

• Reconciliation is the algorithm that React uses to update the UI efficiently.

• It compares the virtual DOM with the previous virtual DOM and only updates the necessary components.

• Reconciliation helps in improving performance by minimizing DOM manipulations.

• Key prop is important for reconciliation to identify which items have changed, added, or removed.

• Example: When a state or prop changes, React...read more

HOC stands for Higher Order Component. It is a pattern in React that allows reusing component logic.

• HOC is a function that takes a component and returns a new component with additional functionality.

• It helps in code reuse, logic abstraction, and cross-cutting concerns.

• HOCs can be used for tasks like authentication, logging, and data fetching.

• Example: withAuth HOC can add authentication logic to a component.

• HOCs can be created using either a function or a class.

Redux is a predictable state container for JavaScript apps.

• Redux helps manage the state of an application in a predictable way

• It allows for a single source of truth for the state

• Actions are dispatched to update the state through reducers

• Example: createStore, combineReducers, applyMiddleware

React is a JavaScript library for building user interfaces that uses a virtual DOM and a component-based architecture.

• React uses a virtual DOM to efficiently update the user interface.

• It follows a component-based architecture where UI is divided into reusable components.

• React uses a declarative syntax to describe how the UI should look based on the application state.

• It efficiently updates only the necessary parts of the UI by comparing the virtual DOM with the real DOM.

• React ...read more

Closures are functions that have access to variables from their outer scope even after the outer function has finished executing.

• Closures allow functions to access variables from their parent function's scope

• They maintain a reference to the variables they need, even after the parent function has finished executing

• Closures are commonly used in event handlers and callbacks

Hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their containing scope during compilation.

• Hoisting applies to both variable and function declarations.

• Variable declarations are hoisted to the top of their scope but not their assignments.

• Function declarations are fully hoisted, meaning they can be called before they are declared.

React Fiber is a complete rewrite of React's core algorithm for rendering UI components.

• React Fiber is a reimplementation of the React core algorithm.

• It allows for incremental rendering, prioritizing updates based on their priority level.

• Fiber reconciles the virtual DOM tree in a more efficient and flexible way.

• It enables features like error boundaries, async rendering, and more.

• Fiber was introduced in React version 16.

useEffect variants are different ways to use the useEffect hook in React for handling side effects.

• useEffect with empty dependency array for running only once on mount

• useEffect with dependency array for running on specific dependencies change

• useEffect with cleanup function for cleaning up side effects

• useEffect with return function for cleanup on unmount

Prop drilling is the process of passing props down multiple levels of nested components in React.

• Prop drilling occurs when a prop needs to be passed through multiple levels of components that do not need the prop themselves.

• It can lead to unnecessary passing of props through intermediate components, making the code harder to maintain.

• To avoid prop drilling, you can use Context API, Redux, or React's useContext and useReducer hooks to manage state at a higher level and avoid p...read more

State is mutable and managed within a component, while props are immutable and passed from parent to child components.

• State is managed within a component and can be changed using setState() method

• Props are passed from parent to child components and cannot be changed within the child component

• State is used for internal component data management, while props are used for passing data from parent to child components

React is a JavaScript library for building user interfaces, while JavaScript is a programming language used for web development.

• React is a library for building user interfaces, while JavaScript is a programming language.

• React uses a virtual DOM for faster rendering, while JavaScript directly manipulates the DOM.

• React allows for component-based architecture, while JavaScript is more procedural in nature.

• React provides a declarative approach to building UI components, while Jav...read more

Interface is for defining object shapes and types, while type is for creating aliases for existing types.

• Interface is used for defining the structure of an object in TypeScript.

• Type is used to create aliases for existing types, making code more readable and reusable.

• Interfaces can be extended or implemented, while types can be used to create union types or intersection types.

• Interfaces are open for extension, while types are closed and cannot be extended.

CI/CD pipelines automate the process of testing and deploying code changes.

• CI stands for Continuous Integration, which involves automatically building and testing code changes as they are committed to the repository.

• CD stands for Continuous Deployment or Continuous Delivery, which involves automatically deploying code changes to production after passing tests.

• CI/CD pipelines help in ensuring code quality, reducing manual errors, and speeding up the release process.

• Popular CI/...read more

useContext hook allows components to access data from a context without passing props down manually

• useContext hook is used to consume a context created by React.createContext

• It takes the context object as an argument and returns the current context value for that context

• It allows components to subscribe to context changes and re-render when the context value changes

Life cycle methods are methods that are called at different stages of a component's life cycle in React.

• Mounting phase: constructor, render, componentDidMount

• Updating phase: shouldComponentUpdate, render, componentDidUpdate

• Unmounting phase: componentWillUnmount