2021 edit:

After implementation of React Hooks, the issue is no longer relevant - you can declare functions inside your functional component as long as you want. However if you want to avoid children re-render, you can wrap your functions with useCallback hook so the function instance remains between renders.

const handleChange = useCallback(() => /* do stuff */, []);

Old answer:

I would suggest to keep your functions outside the Stateless Components as long as it's possible.

Consider following example. Your parent component re-renders, so the SFC child does (FYI: SFC re-renders everytime parent re-renders, it doesn't have any built-in shallow props comparison logic).

If you declare function inside SFC, it will create a completely new instance with every re-render.

If you declare function outside SFC, it will be used n-times, but the function itself will remain the same instance.

Working example at StackBlitz:

How to test it - write something inside input, then click on the child. Parent will re-render, so the child does. The outside-box function fn1 gets pushed to window variable test1, the inside-box function fn2 goes into test2. Now repeat process. If you compare functions inside test1 -> test1[0] === test1[1] will return true, since both of the functions are the same instance.

If you compare test2[0] === test2[1] it will return false, because new instance of function was created.

Note: Use built-in StackBlitz console for testing purposes.

Final note: regardless of what been told above, the perfomance differences are basically unnoticeable.

window.test1 = [];
window.test2 = [];

class App extends Component {
  state = {
    name: 'React'

  handleChange = (e) => this.setState({ name: });

  render() {
    return (
        <Child name={} />

const fn1 = () => {};

const Child = ({ name }) => {
  const fn2 = () => {};
  const checkout = () => {

  return (
    <div onClick={checkout}>{name}</div>

Related Query

More Query from same tag