ReactNative: Show a component or another page

Question

I have a page in which I have a return like:

const MyPage1 = ({holiday, holidayStatus}) => {

// in Render I check some conditions to show or another component or a page:

const Render = () => {
 if ((holidayStatus === 'APPROVED' || holidayStatus === 'REJECTED' || holidayStatus === 'DELETED') && Object.keys(holiday).length > 0){
 return (
  <>
   <RenderDetail />
  </>
)}
else if  ((holidayStatus === 'WAITING' || holidayStatus === 'DRAFT') && Object.keys(holiday).length > 0) {
   return (
  <>
   <EditRequest holiday={holiday}/>
  </>
)}
else {
    return(
    <>
      <RenderSpinner />
   </>
   )
 }
  }

    return (
      <>
       <Render />
      </>
    )
}

const mapStateToProps = (state) => {
  return {
    holiday: state.holiday.holidayInfo,
    holidayStatus: state.holiday.holidayInfo.status,
  }
}

const mapDispatchToProps = (dispatch) => ({
  getHolidayInfo: (payload) => dispatch(getHolidayInfo(payload)),
})

Where EditRequest is a newPage while RenderDetail is a component inside the same page.

Now my problem is that every time I change from RenderDetail to EditRequest (or the same for the opposite) the application show for a second the RenderDetail and then show EditRequest.

In your opinion how can I do to fix this problem?

Answer 1

You can resolve this by adding switch statement. Because first it checks the statement then execute.

But in if/else statement code check both if if is false first it check if then it goes to else

If you prefer to do with if statement the removes else if use only if statement it can resolve your issue.

As,

const MyPage1 = ({holiday, holidayStatus}) => {

 // in Render I check some conditions to show or another component or a page:

 const Render = () => {
  if ((holidayStatus === 'APPROVED' || holidayStatus === 'REJECTED' || holidayStatus === 'DELETED') && Object.keys(holiday).length > 0){
 return (
   <>
    <RenderDetail />
   </>
 )}
 if  ((holidayStatus === 'WAITING' || holidayStatus === 'DRAFT') && Object.keys(holiday).length > 0) {
    return (
   <>
    <EditRequest holiday={holiday}/>
   </>
 )}
 else {
     return(
     <>
       <RenderSpinner />
     </>
    )
  }
   }

     return (
       <>
        <Render />
       </>
     )
 }

 const mapStateToProps = (state) => {
   return {
     holiday: state.holiday.holidayInfo,
     holidayStatus: state.holiday.holidayInfo.status,
   }
 }

 const mapDispatchToProps = (dispatch) => ({
   getHolidayInfo: (payload) => dispatch(getHolidayInfo(payload)),
 })

Answer 2

The problem is the if's that you use, you must to consider to use switch in this case.

 const MyPage1 = ({ holiday, holidayStatus }) => {
  const Render = () => {
    if (Object.keys(holiday).length > 0) {
      switch (holidayStatus) {
        case 'APPROVED': case 'REJECTED': case 'DELETED':
          return <RenderDetail />
        case 'WAITING': case 'DRAFT':
          return <EditRequest holiday={holiday} />
        default:
          break;
      }
    }
    return <RenderSpinner />
  }
  return <Render />
}

const mapStateToProps = (state) => {
  return {
    holiday: state.holiday.holidayInfo,
    holidayStatus: state.holiday.holidayInfo.status,
  }
}

const mapDispatchToProps = (dispatch) => ({
  getHolidayInfo: (payload) => dispatch(getHolidayInfo(payload)),
})

The code looks cleaner too