export const myButton = (
    <button onClick={() => console.log("clicked")}>
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~   [0]
        Log something
    </button>
);

export const myButton = (
    <button onClick={(() => console.log("clicked"))}>
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~   [0]
        Log something
    </button>
);

export const myButton = (
    <button onClick={bar ? () => console.log("clicked") : null}>
                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~   [0]
        Log something
    </button>
);


export const myButton = (
    <button {...{ onClick: () => console.log("clicked")} }>
                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~   [0]
        Log something
    </button>
);

const myButton2 = (
    <button onClick={function () {
                     ~~~~~~~~~~~~~
        // another bad one
~~~~~~~~~~~~~~~~~~~~~~~~~~
    }} disabled/>
~~~~~     [0]
)

const handleClick = () => {
    // this one is kosher
};

export const myAnchorButton = (
    <a href="#" onClick={handleClick}>
        Go nowhere, just log something
    </a>
);

function randomOkFunction() {
    // I ain't doing no harm
}

const anotherOkFunction = () {
    // neither am I
};

class TypicalRefHandler extends React.Component<{}, {}> {
    private element: HTMLElement;
    public render() {
        // ref is not part of the props so using lambdas here will not trigger useless re-renders
        return <div ref={(ref) => this.element = ref} />
    }
}

const StatelessComponent: React.SFC<{}> = () => {
    // component children can be optimized too
    return (
        <div>
            {myElements.map((e) => <span>{e}</span>)}
        </div>
    );
};

const ComponentWithArrowCallback: React.SFC<{}> = () => (
    <Currency amount={ _.sumBy(items, (item: Item) => item.value) } />
);

const ComponentWithFunctionCallback: React.SFC<{}> = () => (
    <Currency amount={ _.sumBy(items, function(item: Item) {
        return item.value;
    })} />
);

const ComplexComposableComponentWith: React.SFC<{}> = () => (
    <ComposableComponent
        header={<HeadingComponent title="test" onClick={()=>{console.log('arrow function show be reported')}} />}
                                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~      [0]
        footer={(
            <FooterComponent
                disabled
                onClick={function(ev) {
                         ~~~~~~~~~~~~~~
                    console.log('function should be reported', ev);
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                }}
~~~~~~~~~~~~~~~~~  [0]
            />
        )}
    >
        {bodyElements.map(x => x.toValidLambda())}
        {/*<a href="#" onClick={()=>{console.log('in comment)}}>Legacy code</a>*/}
    </ComposableComponent>
);

[0]: Lambda expressions in JSX create new references on every render and can cause unnecessary rerenders (jsx-no-lambda-props)