React and stateless components

Question

I saw this comment from React Stateless Functional Components: Nine Wins You Might Have Overlooked :

You should really avoid having function allocations inside statelless components. Just keep them outisde the scope and pass the props, it's a very big performance difference.

I was wondering, if this is my component:

const Text = (props) =>  <p>{props.children}</p>;

// ReactDOM is part of the introduction of React 0.14
ReactDOM.render(
    <Text>Hello World</Text>, 
    document.querySelector('#root')
);

How do I access functions outside this file? Which property should I use?

Answer 1

Just pass them as a prop.

function clickParagraph() {
  console.log('clicked!')
}

const Text = (props) =>
  <p onClick={props.onClick}>{props.children}</p>;


ReactDOM.render(
  <Text onClick={clickParagraph}>Hello World</Text>, 
  document.querySelector('#root')
);

Answer 2

Don't do like this:

const Component = (props) => {
    const getSomeResult = () => "it will be created at every render, you should pass this function in props";

    return <p>{getSomeResult()}</p>
}