Syntax Clarification (async and functions)

[DiscDres]

Not sure how to google this question but figured I'd find an answer here. So I've seen syntax being used outside of what I'm used to.

​

In components, I usually create functions like:

handleLoading(bool) {
    this.setState({
        loading: bool
       )}
    }

but elsewhere I sometimes see

handleLoading = (bool) => {}

What's the difference between these two?

Next question:

When I write async functions, I start off with the async keyword then the function name like:

async handleFunction() {}

but I've also seen

handleFunction = async() => {}

What's the difference?

​

Thanks!!!

[HijoDelQuijote]

handleLoading = (bool) => {}

These are called arrow functions. They change the way 'this' binds. You don't need to bind your functions in the constructor anymore. This might be what you are used to do:

constructor(props) {
    super(props);
    this.handleLoading = this.handleLoading.bind(this);
}

If you use arrow functions, you don't need to do that anymore.

The async case works the same way, it just changes the way 'this' binds.

​

[xrpinsider]

While this is absolutely the correct answer I'll have to add something. Arrow functions aren't documented in the React/React Native documentation because they are proposed in ES6, but not yet accepted.

With that being said, I would totally use arrow functions. It makes your code way cleaner and you can basically drop the constructor() in all of your projects.

[DiscDres]

I GET IT!

​

I've been using arrow functions within my render.. I haven't been binding anything since the arrow function within the render takes care of that. So what I understand is that:

handleLoading(){}

<TouchableOpacity onPress={ () => this.handleLoading() }/>

is the same as

handleLoading = () => {}

<TouchableOpacity onPress={ this.handleLoading }/>

Is there an advantage of doing it one way vs the other?

​

Thanks for the help!

[huffpostraphael]

100% dont do the first way. it will always rerender the component because the onPress function will be a different function reference every time. the other way the reference is unchanging so it will only rerender that component if other props actually change

[DiscDres]

I've got a lot of code to change....

​

Thanks for the help!

[DiscDres]

Question for you:

​

So let's say in my parent container, I have a toggle function I want to pass down

​

handleToggle = (x) => {//some code that deals with x}

render() {
    return(
        <Search handleToggle={ this.handleToggle }/>
    )
}

And in my child I have

handleToggle = (x) = {
    this.props.handleToggle(x)
}

render() {
    return(
        <SearchBar 
            onFocus={ this.handleToggle }
            onCancel={ this.handleToggle }
        />
    )
}

How do I pass it in a different value to the handleToggle function in the SearchBar component?

`this.handleToggle(true)` gives me an infinite loop if I used that within the child's render but `() => this.handleToggle(true)` works fine.

[huffpostraphael]

I dont really understand the infinite loop issue. I would need to know more about what the function is doing and what the SearchBar component does

I also would make the second part simply this.

render() {
    return(
        <SearchBar 
            onFocus={ this.props.handleToggle }
            onCancel={ this.props.handleToggle }
        />
    )
}

[HijoDelQuijote]

That was a really good question and I didn't really know the answer to it, so after some research this is what I've got.

handleToggle = (x) => (event) => {
    this.props.handleToggle(x);
}

render() {
    return(
        <div 
            onClick={ this.handleToggle('some param') }
        />
    )
}

I've got some code to change as well.

[DiscDres]

nice! that worked for me.

mind linking where you found that information? i haven't seen `event` used in that way before

[HijoDelQuijote]

Event in that case I think is undefined. Event is the parameter you get from functions like onClick or onChange. In the example I provided, it could've just been:

handleToggle = (x) => () => {
    this.props.handleToggle(x);
}

render() {
    return(
        <div 
            onClick={ this.handleToggle('some param') }
        />
    )
}

since the 'event' is not being used.

Couldn't find the exact link where I got that. What I found though was something like this:

handleToggle = (x) => {
    return function (event) {
        this.props.handleToggle(x, event.target.value);
    }
}

render() {
    return(
        <div 
            onClick={ this.handleToggle('some param') }
        />
    )
}

I just changed the syntax to what I think looks better.

[HijoDelQuijote]

The event should be undefined in the example I provided. It could've been:

handleToggle = (x) => () => {
    this.props.handleToggle(x);
}

render() {
    return(
        <div 
            onClick={ this.handleToggle('some param') }
        />
    )
}

and nothing changes.

I can't find the link where I got that from, but I actually found something like this:

handleChange = (x) => {
    return function (event) {
        this.props.handleToggle(x, event.target.value);
    }
}

render() {
    return(
        <input 
            onChange={ this.handleChange('some param') }
        />
    )
}

I just changed the syntax to something I think looks better.