What is difference between fragments and strict mode?

Question

My question is apart from obvious difference, what are the main difference between fragment and strict mode?

Answer 1

Fragment:

A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

It’s a tiny bit faster and has less memory usage (no need to create an extra DOM node). This only has a real benefit on very large and/or deep trees, but application performance often suffers from death by a thousand cuts. This is one cut less.

Fragments declared with the explicit <React.Fragment> syntax may have keys. A use case for this is mapping a collection to an array of fragments — for example, to create a description list:

 function Glossary(props) {
   return (
     <dl>
       {props.items.map(item => (
         // Without the `key`, React will fire a key warning
         <React.Fragment key={item.id}>
           <dt>{item.term}</dt>
           <dd>{item.description}</dd>
         </React.Fragment>
       ))}
     </dl>
   );
 }

for further details to know about React.fragment visit Documentation

StrictMode:

StrictMode is a React Developer Tool primarily used for highlighting possible problems in a web application. It activates additional deprecation checks and warnings for its child components. One of the reasons for its popularity is the fact that it provides visual feedback (warning/error messages) whenever the React guidelines and recommended practices are not followed. Just like the React Fragment, the React StrictMode Component does not render any visible UI.

The React StrictMode can be viewed as a helper component that allows developers to code efficiently and brings to their attention any suspicious code which might have been accidentally added to the application. The StrictMode can be applied to any section of the application, not necessarily to the entire application. It is especially helpful to use while developing new codes or debugging the application.

Example:

 import React from 'react';

 function StictModeDemo() {
    return (
       <div>
         <Component1 />
           <React.StrictMode>
             <React.Fragment>
               <Component2 />
               <Component3 />
             </React.Fragment>
           </React.StrictMode>
         <Component4 />
       </div>
    );
  }

for further details to know about Strict mode visit Documentation