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 ?

CodePudding user response：

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());
}

CodePudding user response：

This might not be relevant to your problem but it is a general tip for all react users that a react component must have only 1 return statement at most