render a part JSX by another function component - reactJS

user_1404151 0
Viewed 43

I have a function component like that

function myMainComponent() {

const MyUIA() {
 //some calulations about attrs
 return (<div><ComponentA {...attrs}></div>)
}

const MyUIB() {
 //some calulations about attrs
 return (<div><ComponentA {...attrs}></div>)
}

// Way A
/*
return (
<div>
  <MyUIA/>
  <MyUIB/>
</div>);
*/

// Way B
return (
<div>
  {MyUIA()}
  {MyUIB()}
</div>);


}

The results of render by WayA and WayB is the same, but in first case there is a flickering

  1. So why the WayB has better performance without flickering ?
  2. What is the best way to render part of renders thas exist in the same function component ?
  3. does WayA and WayB have a specific name for example "render by calling native method" and "render by calling JSX method" in react ?
react-functional-component react-component reactjs javascript
1 Answers

Since as we know every code we write in react is converted into JSX first, then it get rendered so if we see for native method the JSX element is created twice while for JSX it's created only once. So this is the case one can see the flickering. I hope it helps.

function myMainComponent() { 
    const MyUIA = () => {
       return /*#__PURE__*/React.createElement("div", null,/*#__PURE__*/React.createElement(ComponentA, null)); };

     const MyUIB = () => {
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ComponentA, null));}; 
      
      // Way A
       return /*#__PURE__*/React.createElement("div", null, 
              /*#__PURE__*/React.createElement(MyUIA, null), 
              /*#__PURE__*/React.createElement(MyUIB, null)); 
      
      // Way B
      return /*#__PURE__*/React.createElement("div", null, MyUIA(), MyUIB());
}
user_198897710
Related