REACT

How react works

React creates a virtual DOM which is lightwweight copy of the real dom. When the state changes in a component it first runs a "diffing" algorithm, which identifies what has changed in the virtual DOM. The second step is reconciliation, where it updates the DOM with the results of diff in a efficient way.

compare react over angular

• React is a JavaScript library, whereas Angular is a TypeScript-based JavaScript framework.
• React uses one-way data binding and virtual DOM trees, whereas Angular uses two-way data binding and real DOM.
• Moreover, React is faster than Angular as it has a smaller bundle size.
• Angular is mostly used to build complex enterprise-grade apps like single-page apps and progressive web apps.

Angular over react

Angular is better than React if your application is enterprise-grade and you need to incorporate complex functionalities like progressive, single-page, and native web apps. Since it is a full-fledged framework, functions such as data binding, dependency injection, component-based routing, form validation, and project generation can be implemented with Angular packages. In React, this requires additional libraries or modules to be installed.

Moreover, Angular has pre-built material design components. To use them in React requires installing additional library– Material-UI Library & Dependencies. However, React specializes in creating UI components and can be used in any application, including single-page apps.

React over Angular

In terms of performance, bundle size, and backward compatibility, React outperforms Angular. The component-driven architecture of React allows developers to reuse code components, which tends to save cost and time. It also outperforms Angular due to its rendering optimizations and Virtual DOM implementation. Also, React developers can access many pre-built solutions for development.

Learning curve

In comparison to Angular, React is faster and easier to learn. Angular has a steeper learning curve due to several in-built functionalities, so it takes more time initially. React has a shorter learning curve due to its simple structure, use of plain JavaScript, and small package size.

Advantages of React

• Reusable and more predictable code
• Easier debugging with declarative views
• Faster development time
• Enhanced developer productivity
• Easy migration between different versions
• Support for mobile app development with React Native
• Faster updates with both server-side and front-end support
• Improved load time and performance with efficiently built UI
• Integration with third-party libraries

Presentational / Container components

Presentational components are concerned with how things look. They generally receive data and callbacks exclusively via props. These components rarely have their own state, but when they do it generally concerns UI state, as opposed to data state.

When your component just receives props and renders them to the page, this is a stateless component, for which a pure function can be used. These are also called dumb components or presentational components.

Container components are more concerned with how things work. These components provide the data and behavior to presentational or other container components. They define actions and provide these as callbacks to the presentational components. They are also often stateful as they serve as data sources.

Class / Functional components

Class components uses class syntax and come with features like their own state and lifecycle methods, allowing them to do more complex things. Functional components are the functions that take in "props" (short for properties) and spit out React elements. With the introduction of Hooks, these functional components can now also manage state and side-effects, making them even more powerful.

Class Components: Class components are ES6 classes that extend the React.Component class. They have additional features like state management and lifecycle methods. Functional Components: Functional components are JavaScript functions that return JSX (JavaScript XML). They are simpler, lightweight, and promote the use of React Hooks for state and lifecycle features.

State

• In React, state is used to manage the internal data of a component.
• It is an object that stores the data that can change within a component.
• When the state of a component changes, React will re-render the component with the updated data.
• State can only be modified within the component where it is defined and cannot be accessed or modified by any other component.
• The state can be initialized in the constructor of a component, and it can be updated using the setState() method.

Props

• In React, props (short form for "properties") are used to pass data from a parent component to a child component.
• Props are read-only, and a child component cannot modify the props it receives from its parent.
• Props are passed to a component as attributes, and they are accessed using the "this.props" keyword.

State vs Props

The key difference between state and props is that state is managed within a component, while props are passed from a parent component to a child component. State is used to manage internal component data, while props are used to pass data from a parent component to a child component. In general, we should try to keep state to a minimum and only use it for data that changes within a component. Props should be used to pass data from a parent component to a child component.

LifeCycle methods

Component Mounting phase

1. constructor()
2. render()
3. componentDidUpdate()

Component Updating phase

1. getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()

Component Unmounting phase

1. componentWillUnmount()

HOOKS

Hooks let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own

State Hooks

• useState declares a state variable that you can update directly.
• useReducer declares a state variable with the update logic inside a reducer function.

Context hooks

• Context lets a component receive information from distant parents without passing it as props. For example, your app’s top-level component can pass the current UI theme to all components below, no matter how deep.

• useContext reads and subscribes to a context.

Ref Hooks

• Refs let a component hold some information that isn’t used for rendering, like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an “escape hatch” from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs.

• useRef declares a ref. You can hold any value in it, but most often it’s used to hold a DOM node.

• useImperativeHandle lets you customize the ref exposed by your component. This is rarely used.

Effect Hooks

• Effects let a component connect to and synchronize with external systems. This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and other non-React code.

• useEffect connects a component to an external system.

• There are two rarely used variations of useEffect with differences in timing:

• useLayoutEffect fires before the browser repaints the screen. You can measure layout here.

• useInsertionEffect fires before React makes changes to the DOM. Libraries can insert dynamic CSS here.

Performance Hooks

• A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a cached calculation or to skip a re-render if the data has not changed since the previous render.To skip calculations and unnecessary re-rendering, use one of these Hooks:

• useMemo lets you cache the result of an expensive calculation.

• useCallback lets you cache a function definition before passing it down to an optimized component.

• Sometimes, you can’t skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating blocking updates that must be synchronous (like typing into an input) from non-blocking updates which don’t need to block the user interface (like updating a chart).

To prioritize rendering, use one of these Hooks:

• useTransition lets you mark a state transition as non-blocking and allow other updates to interrupt it.
• useDeferredValue lets you defer updating a non-critical part of the UI and let other parts update first.

Resource Hooks

Other hooks

REDUX

PERFORMANCE

SECURITY

REACT TESTING - JEST, RTL, CYPRESS, UNIT, INTEGRATION, SMOKE, End to End

NEXTJS

LOGGING & METRICS

Metrics:

Metrics refer to quantitative measurements that provide insights into various aspects of your application's performance and user interactions. These metrics can include:

Page load times:

Measure how long it takes for your React application to load and become interactive.

API response times:

Track the time it takes for API calls to return data to your application.

Error rates:

Monitor the frequency of errors occurring in your application.

User interactions:

Measure user engagement metrics like click-through rates, form submissions, etc.

Tools like Google Analytics, New Relic, or custom instrumentation with libraries like Prometheus can be used to collect and analyze these metrics.

Logging:

Logging involves recording important events, errors, and debugging information during the runtime of your React application. Logging helps developers understand what's happening within the application and diagnose issues. Commonly logged information includes:

Errors:

Log error messages along with stack traces to identify and fix bugs. Informational messages: Log important events or state changes for tracking application behavior.

Warnings:

Log warnings for potential issues that don't cause immediate failures. Libraries like Winston, Log4js, or using built-in logging capabilities in platforms like AWS CloudWatch or Azure Application Insights can be used for logging in React applications.

Monitoring:

Monitoring involves actively observing the performance, availability, and behavior of your React application in real-time or over a period. Monitoring helps detect issues early, ensure uptime, and optimize performance. Key aspects of monitoring in React applications include:

Server monitoring:

Monitor server health, resource usage, and performance metrics.

Client-side monitoring:

Monitor browser performance, JavaScript errors, and user interactions.

Alerting:

Set up alerts based on predefined thresholds for metrics like CPU usage, response times, or error rates. Tools like Datadog, Grafana, Prometheus, or built-in monitoring features of cloud platforms (AWS CloudWatch, Azure Monitor) can be used for comprehensive monitoring of React applications.

React error boundaries - open Telemetry, grafana - visualization tool