I have a Redux Form page with some fields that have to be disabled when a condition is met.

My question is whether I should check this condition once when I do the fetchData call on mounting the component or if I should have some kind of function isDisabled() that will be called in the render (note: this function used the data fetched in the didMount that is already in the state).

I want to know which one (if any) would be more performant or is the better way to handle this in React.

I'll try to illustrate the two options.

Option 1: set in state on mount

componentDidMount() {
   fetch(...).then(result => {
      setState({ data: result.data, isDisabled: result.data.fixed === 1 }); 
   });
}

render() {
   const { isDisabled } = this.state;
   return (
      <Form>
        ...
        <Field disabled={isDisabled} />
      </Form>
   );
}

Option 2: check if it is disabled with a function, preventing using state twice for same data

componentDidMount() {
   fetch(...).then(result => {
      setState({ data: result.data }); 
   });
}

isDisabled() {
   const { data } = this.state;
   return data.fixed === 1;
}

render() {
   return (
      <Form>
        ...
        <Field disabled={this.isDisabled()} />
      </Form>
   );
}

Thank you for your help