Sharing code in between react components by using render props. HOC and react prop are some of the best ways to share code in react class components.
#hoc #react #renderprop
2. 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
3. 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
4. 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
5. Prop value will be a function
// 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>
);
}
5
6. 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
export default function App() {
return (
<div className="App">
<Component name={(name) => <p>{name}</p>} />
</div>
);
}
6
7. 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
8. 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
11. 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
12. 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
13. 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
15. Let’s use the common counter:
Let’s use the common counter component in parent component.
export default function App() {
return (
<div className="App">
<Counter
render={(count, setCount) => (
<ClickCounter count={count} onClick={setCount} />
)}
/>
<Counter
render={(count, setCount) => (
<HoverCounter count={count} onMouseHover={setCount} />
)}
/>
</div>
);
}
15
16. Result:
Here, we don’t repeat the same code but both components are working as expected.
16
17. 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