I have started to learn ReactJS and have a question about stateless and stateful components. Generally I follow separation of components and containers like below. Stateful functions are in component folder and other logic operations under container folder. folder structure
Lets think material UI dropdown list.
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
const useStyles = makeStyles(theme => ({
button: {
display: 'block',
marginTop: theme.spacing(2),
},
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
}));
export default function ControlledOpenSelect() {
const classes = useStyles();
const [age, setAge] = React.useState('');
const [open, setOpen] = React.useState(false);
const handleChange = event => {
setAge(event.target.value);
};
const handleClose = () => {
setOpen(false);
};
const handleOpen = () => {
setOpen(true);
};
return (
<div>
<FormControl className={classes.formControl}>
<InputLabel id="demo-controlled-open-select-label">Age</InputLabel>
<Select
labelId="demo-controlled-open-select-label"
id="demo-controlled-open-select"
open={open}
onClose={handleClose}
onOpen={handleOpen}
value={age}
onChange={handleChange}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
);
}
In order to open and close dropdown handleClose()
and handleOpen()
methods change open state, which means that it is stateful component. But there is no other change (omit age setting). It seems reusable component but includes state with very simple operation as opening and closing. Which folder should I put in? Container or component?
Actually beyond the folder selection, I can give open state as a callback function and open state as a props. But I think that doing this in each container might be overkill and makes re-render parent container because of just opening dropdown list(React.memo can handle it but also using it everywhere seems odd).
1- What is the correct way of using simple operation? giving the functions as props or use states in component?
2- If I use props does rendering cause performance issue since entire other components render?
Thanks in advance.