![]() You can read more about React's StrictMode in the official docs. There's also a 'NamedExoticComponent' interface which includes the displayName (responsible for exhibiting the component name when debugging in React Devtools), but it doesn't make sense to apply it in this context as the fragment serves as a wrapper to its children and will not render any visible UI.Īnother example where an ExoticComponent interface is applied is the component React.StrictMode which also doesn't result in attaching a new node to the DOM and is used for debugging purposes while in development mode. The reason this ExoticComponent interface exists is that a component like React.Fragment should not attach its static methods to the component itself, but to the original function. The way to handle it being a valid JSX element and access its props is by pretending that it is a normal component. Although it doesn't behave like the other types of components (FunctionComponent is the main one now as StatelessComponent has been deprecated with the introduction of hooks), there's no other way implemented to tell the JSX parser that this is a JSX element type. This is exactly the case for React.Fragment. This declaration allows for developing a special kind of component that would not act as a regular React component. It is required that every React component must return a single JSX element. But what about the ExoticComponent interface, what does it have to do with react fragments? Explain the use of fragments in React components. The second part makes a lot of sense as the nodes added to the DOM are the children nodes of the fragment component we apply. It is declared using the ExoticComponent TypeScript interface and it specifies a prop `children` which is set to be a ReactNode. ![]() Bonus - A look into the internals of React Fragmentīy digging into the react codebase we can tell how the React.Fragment component works internally. ![]() The fragments can be applied directly to the return of a React component, inside functions that return JSX, in conditional rendering, and pretty much anywhere else a valid react component can be used.īesides avoiding adding an unnecessary element to the DOM, fragments are also the solution to not break the rules of the HTML syntax, as in the `` element example where its parent node must be either ``, `` or ``. If there's no key or attributes set, the short syntax can be applied and both approaches deliver the same result. An example would be when mapping items from an array to JSX. By providing the ability to return multiple elements through JSX, fragments solved the issue of occasional invalid HTML markups inside react applications due to. The most common case where the full syntax is required is when dealing with cases where a key is required by React so that, internally, it can uniquely identify a given node.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |