Functions in stateless components?

Question

I am trying to convert this cool <canvas> animation I found here into a reusable React component. It looks like this component will need one parent component for the canvas and many child components for function Ball() .

For performance reasons, it would probably be better to turn Balls into stateless components since there will be a lot of them. I am not so familiar with creating stateless components, and I was wondering where I should define the functions this.update() and this.draw , which are defined in function Ball() .

Functions for stateless components go inside the component or outside? In other words, which of the following is better?

1:

 const Ball = (props) => { const update = () => { ... } const draw = () => { ... } return ( ... ); } 

2:

 function update() { ... } function draw() { ... } const Ball = (props) => { return ( ... ); } 

What are the pros / cons of each and are they better for specific use cases like mine?

Answer 1

First of all, it should be noted that stateless functional components cannot have methods; you should not expect to call update or draw on the Ball rendering if it is a stateless functional component.

In most cases, you should declare functions outside the component function, so you only declare them once and always reuse the same link. When you declare a function inside, every time a component is displayed, the function will be defined again.

There are cases when you need to define a function inside a component, for example, assign it as an event handler that behaves differently based on the properties of the component. But you can define a function outside of Ball and associate it with properties, making the code much cleaner and making update or draw functions reusable.

 // You can use update somewhere else const update (propX, a, b) => { ... }; const Ball = props => ( <Something onClick={update.bind(null, props.x)} /> ); 

instead:

 const Ball = props => { function update(a, b) { // props.x is visible here } return ( <Something onClick={update} /> ); } 

Answer 2

We can have functions inside functional components without saving the state, an example is given below:

  const Action = () => { function handlePick(){ alert("test"); } return ( <div> <input type="button" onClick={handlePick} value="What you want to do ?" /> </div> ); } 

But this is not a good practice, since the handlePick() function will be defined every time the component is called.

Answer 3

2: this is good, but there is a tragedy when you want to use props.

Best practice is to use useHooks functions such as useCallback function.

import them from the responsive library.

Answer 4

We can use the React useCallback trap, as shown below in the functional component:

 const home = (props) => { const { small, img } = props const [currentInd, setCurrentInd] = useState(0); const imgArrayLength = img.length - 1; useEffect(() => { let id = setInterval(() => { if (currentInd < imgArrayLength) { setCurrentInd(currentInd => currentInd + 1) } else { setCurrentInd(0) } }, 5000); return () => clearInterval(id); }, [currentInd]); const onLeftClickHandler = useCallback( () => { if (currentInd === 0) { } else { setCurrentInd(currentInd => currentInd - 1) } }, [currentInd], ); const onRightClickHandler = useCallback( () => { if (currentInd < imgArrayLength) { setCurrentInd(currentInd => currentInd + 1) } else { } }, [currentInd], ); return ( <Wrapper img={img[currentInd]}> <LeftSliderArrow className={currentInd > 0 ? "red" : 'no-red'} onClick={onLeftClickHandler}> <img src={Icon_dir + "chevron_left_light.png"}></img> </LeftSliderArrow> <RightSliderArrow className={currentInd < imgArrayLength ? "red" : 'no-red'} onClick={onRightClickHandler}> <img src={Icon_dir + "chevron_right_light.png"}></img> </RightSliderArrow> </Wrapper>); } export default home; 

I get 'img' from this parent and this is an array.