Calling of function on multiple lines with 1.19

Prettier 1.19.1 Playground link

--parser babel
--print-width 115
--tab-width 4

Input:

import { Component } from 'react';
  
class Test extends Component {
    updateProp(
        prop,
        { target: { value } },
    ) { 
        let nextValue = Math.floor(+value);
        if (nextValue < 1) {
            nextValue = 1;
        }
        this.setState({ [prop]: nextValue }, () => this.props.onChange(this.state));
    }
    
    toggleProp(prop) {
        this.setState( prevState => ({ [prop]: !prevState[prop] }), () => this.props.onChange(this.state));
    }   
} 

Output:

import { Component } from "react";

class Test extends Component {
    updateProp(prop, { target: { value } }) {
        let nextValue = Math.floor(+value);
        if (nextValue < 1) {
            nextValue = 1;
        }
        this.setState({ [prop]: nextValue }, () => this.props.onChange(this.state));
    }

    toggleProp(prop) {
        this.setState(
            prevState => ({ [prop]: !prevState[prop] }),
            () => this.props.onChange(this.state)
        );
    }
}

Expected behavior: The change to updateProp() is expected, but I didn’t expect the calls to this.setState() to wrap to multiple lines. Is there a change that I didn’t see in the release notes or is this a bug?

[thorn0]

the same weird behavior of multi-line with a single line on the last line

As I already said, it’s a different heuristic in play here. “setTimeout-like calls”. Unlike the one we discussed before (“function composition”), this one seems to have more room for improvement.

[thorn0]

As for join, I stand corrected again! So the discussed rule is: if a call has more than one argument and there are at least two function literals or at least one nested call with function literal arguments among the arguments, then each argument gets its own line.

As for map, you forgot to put parens around its body: value => { word: value } vs value => ({ word: value }), so Prettier thinks word: value is a labelled statement and uses its another heuristic/pattern/rule, namely “a setTimeout-like call”, to format this call.