React render props

REACT RENDER PROP
By Saikat Samanta

Knowledge required:
1. Basic of React Js.
2. Typescript
Point to note:
1. In this presentation we are going to use typescript to create the examples.
2

What is render prop?
The term “render prop” refers to a technique for sharing code between React
components using a prop whose value is a function.
So, we have two things here:
1. Sharing code by using prop.
2. Prop value will be a function.
Let’s simplify it...
3

Sharing code by using Prop
// Child component
export function Component(props: { name: JSX.Element})
{
return <div>{props.name}</div>;
}
// Parent component
export default function App() {
return (
<div className="App">
<Component name={<p>John</p>} />
</div>
);
}
4

Prop value will be a function
// Child component
export function Component(props: { name: () => JSX.Element }) {
return <div>{props.name()}</div>;
}
// Parent component
return (
<Component name={() => <p>John</p>} />
</div>
);
}
5

Prop value will send from child component
// Child component
export function Component(props: { name: (name: string ) => JSX.Element }) {
return <div>{props.name("John")}</div>;
}
// Parent component
return (
<Component name={(name) => <p>{name}</p>} />
</div>
);
}
6

Now, we have the some idea about, what render prop definition mean.
So, it’s saying, we can share code between react components with the help of prop and
prop value will be a function.
Let’s see how render prop help to share
code between components. 🤔
7

Let’s take an example:
We have two tasks:
1. We need to implement a component which will count how many times a button
clicked.
2. We have a header and it will count how many times we hover on it.
8

1. Button click counter:
// Child component
export function ClickCounter() {
const [count, setCount] = useState(0);
const addCount = () => {
setCount(prevCount => prevCount + 1);
}
return (
<div>
<button onClick={addCount}>
You click {count} time
</button>
</div>
);
}
// Parent component
return (
<ClickCounter/>
</div>
);
}
repeated code
9

2. Hover counter
// Child component
export function HoverCounter() {
const [count, setCount] = useState(0);
setCount(prevCount => prevCount + 1);
}
return (
<div onMouseEnter={addCount}>
<p>Hover {count} times</p>
</div>
);
}
// Parent component
return (
<HoverCounter/>
</div>
);
}
repeated code
10

Here, we are repeating a code block in both component. To avoid this situation `render
prop`comes into picture.
By using `render prop` we will share the same piece of code with both components.
Let’s see … 🤔
11

Remove the repeated part:
Removed the repeated part and replace with props in ClickCounter.
export function ClickCounter({
count,
onClick,
}: {
count: number;
onClick: React.MouseEventHandler<HTMLButtonElement>;
}) {
return (
<div>
<button onClick={onClick}>You click {count} time</button>
</div>
);
}
12

Remove the repeated part:
Removed the repeated part and replace with props in HoverCounter.
export function HoverCounter({
count,
onMouseHover,
}: {
count: number;
onMouseHover: React.MouseEventHandler<HTMLDivElement>;
}) {
return (
<div onMouseEnter={onMouseHover}>
<p>Hover {count} times</p>
</div>
);
}
13

Create a common counter component:
export function Counter(props: {
render: (count: number, addCount: () => void) => JSX.Element;
}) {
// Count logic
const [count, setcount] = useState(0);
setcount((prevState) => prevState + 1);
};
// End logic
return <div>{props.render(count, addCount)}</div>;
}
14

Let’s use the common counter:
Let’s use the common counter component in parent component.
return (
<Counter
render={(count, setCount) => (
<ClickCounter count={count} onClick={setCount} />
)}
/>
<Counter
render={(count, setCount) => (
<HoverCounter count={count} onMouseHover={setCount} />
)}
/>
</div>
);
}
15

Result:
Here, we don’t repeat the same code but both components are working as expected.
16

Conclusion:
1. `Render props` will be very helpful to avoid code repetition.
2. We can share code in any level of component tree no need to be a direct child.
3. This will help to write code in more organized way without code repetition.
17

Reference:
1. https://reactjs.org/docs/render-props.html
2. https://blog.logrocket.com/react-reference-guide-render-props/
3. https://flexiple.com/react/render-props-an-advanced-react-pattern/
18

React render props

More Related Content

React render props