Using functions in react native render-CodePudding

I have 2 functions called isTrue and isFalse.

export function isTrue(param) {
  return param === true;
};

export function isFalse(param) {
  return param === false;
};

I have a few buttons in react native which change from disabled state want a variable is true or false. I could do it like this:

<Button
  text="This is a button"
  onPress={handlePress}
  isDisabled={var === true}
/>

But now I'm using the functions like this:

<Button
  text="This is a button"
  onPress={handlePress}
  isDisabled={isTrue(var)}
/>

When adding a console.log to the 'isTrue'-function, I see it gets called a lot (every re-render).

Is this bad for performance. I'm not seeing any performance issues, but it's quiet a simple app (for now) and I don't think the calculations in this function is't difficult.

I'm planning to add more functions like isNull, isNotNull. It's just for myself, var === null works like isNull(var) but for me it's easier to read. If there could be any performance issues, I switch back again.

CodePudding user response：

It's fine. It's just how react works, you can't do anything about it and it's not a performance issue

But these particular functions don't do anything, you could just do

<Button
  text="This is a button"
  onPress={handlePress}
  isDisabled={var}
/>

If something is true or false, you don't have to additionally compare them to true or false

const x = true
console.log(x, x === true)

CodePudding user response：

You should use it like this.

<Button
text="This is a button"
onPress={handlePress}
isDisabled={()=>isTrue(var)}
>

The better approach is to don't use your function, just use it like this:

    <Button
  text="This is a button"
  onPress={handlePress}
  isDisabled={var}
>