React Design Patterns and Best Practices - Second Edition

Refs and event handlers

Since there is no component instance, to use refs or event handlers with stateless functional components, you can define them in the following way:

() => { 
  let input;
 
  const onClick = () => input.focus();
 
  return ( 
    <div> 
      <input ref={el => (input = el)} /> 
      <button onClick={onClick}>Focus</button> 
    </div> 
  ) 
}