ReactJS correct way to use of stateful and stateless components?

Question

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.

Answer 1

container component:

these are components that does heavy logic and majorly are route based or ( better to say heavy ) logic based.

function components:

these function are usable small ( or may be large ) but the main purpose is they are usable in several container components and event may be in other function components, the purpose of function components is reputability, it they hold some state (like holding a simple hook state to track toggle in your case) i can say that it's totally OK

most of time you would find yourself using container components at route level with Redux connected ( also i should note that its discouraged these days ) and many other function components nested inside of your sub components.

so to answer to your questions, i can say that:

1. for simple operations you DO NOT have to hold state in parent
   component and pass it down through to your functional component, this cause you passing props down a lot to your child components and makes the project maintenance so tricky and cause a bad code, it's totally OK to hold simple states in sub-components
2. i think not that much, if you only pass simple props...