Perform a function OnRender in React Native

Question

The following is the code that generates a series of buttons. As the initial render takes place a function determines whether the element has a prop called init. If it does that it performs the action as if that button had been clicked.

Technically this code works but it triggers a warning as it is effective triggering a re-render in the middle of a render. How do you trigger an effective OnRender functions?

export class NavTabItem extends React.Component {
    constructor(props) {
        super(props);
        global.register(this, 'screen')
    }

    NavTabAction = () => {
        global.setState({
            screen: this.props.screen,
        })
    }

    render() {

// determine whether the element has the prop of init and if it does click on it.

        if(this.props.init){
            this.NavTabAction()
        }

        return (
            <TouchableOpacity onPress={this.NavTabAction}>
                <View style={global.state.screen == this.props.screen ? [styles.NavTabItem, styles.NavTabItemSelected] : styles.NavTabItem}>
                    <View style={styles.NavTabIcon} />
                    <TextCap11 style={styles.NavTabLabel}>{this.props.children}</TextCap11>
                </View>
            </TouchableOpacity>
     );
  }
}

Banjer · Accepted Answer · 2020-02-27 14:09:02Z

3

For class-based React components, such as in your example, you would use the componentDidMount() lifecycle method, which is fired only once after the component has loaded, e.g.:

componentDidMount(){
  this.NavTabAction();
}

That said, I would encourage you to use React Hooks, as the React world is moving away from class-based components to functional components + hooks.

To achieve similar componentDidMount functionality with hooks, you would use useEffect like this in a functional component:

useEffect(() => {
  this.NavTabAction();
}, []);  // the [] is important here to behave similar to componentDidMount.

answered Feb 27, 2020 at 14:09

Banjer

8,3506 gold badges51 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Walrus Over a year ago

Looks worth understanding about this further. Copying your useEffect directly caused an error. Do I take it there is a bit more to learn about this before just using it?

Banjer Over a year ago

Right you would need to refactor your component as a functional component. The first example in the effect hooks doc is a good one to start with (and don't forget to export the function if you will need to import it elsewhere). I'd highly recommend reading through the React Hooks docs however, for a good foundation. Good luck!

Walrus · Accepted Answer · 2020-02-27 14:06:46Z

0

The warning is caused by performing a function on a component that is still rendering and though it technically worked, the solution is in line with the question.

There are a number of built in functions including one that would meet the requirements of an effective onRender.

Remove the script from the render and place it above render inside componentDidMount() function.

componentDidMount() {
        if(this.props.init){
            this.NavTabAction()
        }
    }

QED

answered Feb 27, 2020 at 14:06

Walrus

20.6k40 gold badges131 silver badges216 bronze badges

Collectives™ on Stack Overflow

Perform a function OnRender in React Native

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related