2

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

Shahbaz Raza
  • 29
  • 2
  • What are the obvious reasons? The naming? Both components has different purpose and documented at the docs, what kind of answer you looking for? – Dennis Vash Apr 28 '22 at 10:54
  • Could you please [tag](https://stackoverflow.com/help/tagging) your question properly? – Anindya Dey Apr 28 '22 at 10:55
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Apr 28 '22 at 13:35

1 Answers1

2

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

Talha Akbar
  • 462
  • 3
  • 15