Passing callback functions as a component prop is not new in Javascript world. We used to pass callback with events and also when we try to implement a controlled component. Slowly, react community has evolved a pattern based on passing a function as props. It is called the render prop pattern. The term “render props” refers to a technique for sharing code between React components using a prop whose value is a function. A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic. 

You can think of this pattern as a child component will call the prop function and the RETURN element will be inserted by the parent component. It gives a way so that a child component can modify the STRUCTURE of the parent component without dealing with Refs. React router is ONE LIBRARY that has used this pattern. Below is a very good example of how to render prop patterns work:

You can clearly see that render prop will be called by Fetch child component and it will insert the product DETAIL node in the parent component.