Flutter - Difference in Widget & Stateless Widget & Stateful Widget

Question

Quick one if anyone is aware as I haven't been able to find out.

For widgets I know there are two namely different widget types. One that extends Stateless widget -->

class RoundedButton extends StatelessWidget {
  final String text;
  final Function? onPressed;
  final double? width;
  final Color? color;

  const RoundedButton(
      {Key? key,
      required this.text,
      required this.onPressed,
      this.width,
      this.color})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 40,
      width: width ?? double.infinity,
      child: ElevatedButton(
          child: Text(text, style: Theme.of(context).textTheme.button),
          onPressed: onPressed as void Function()?,
          style: ElevatedButton.styleFrom(
            elevation: 1,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
            primary: color ?? kAccentColor,
          )),
    );
  }
}

Then there is your Stateful widget -->

class RoundedButton extends StatefulWidget {
  final String text;
  final Function? onPressed;
  final double? width;
  final Color? color;

  const RoundedButton(
      {Key? key,
      required this.text,
      required this.onPressed,
      this.width,
      this.color})
      : super(key: key);

  @override
  State<RoundedButton> createState() => _RoundedButtonState();
}

class _RoundedButtonState extends State<RoundedButton> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 40,
      width: widget.width ?? double.infinity,
      child: ElevatedButton(
          child: Text(widget.text, style: Theme.of(context).textTheme.button),
          onPressed: widget.onPressed as void Function()?,
          style: ElevatedButton.styleFrom(
            elevation: 1,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
            primary: widget.color ?? kAccentColor,
          )),
    );
  }
}

However there is just Widget by itself that can be instantiated within a widget itself such as the following example

Widget getBottomContainer(BuildContext context, String? myUserId) {
    return SafeArea(
      bottom: true,
      child: Padding(
        padding: const EdgeInsets.only(top: 8.0),
        child: Container( .....

My curiosity is around the implementation of this last type. Does this just assume a default stateless widget as there is no lifecycle around the build / vars change and therefore only re-renders when the parent does. And therefore for sake of code readability etc. can be extrapolated to their own stateless widgets. Or by the fact that they are created within the widget and called therein, is there a slight performance increase?

My assumption around the later is that you're still chaining just the return of further widgets directly rather than creating an instance of a container stateless class, you're returning directly the next widget in the chain you wish to use?

I'm looking to re-write some code and desire a balance between code readability - factoring components out into their own files etc. but maintain good performance and practice.

Any general input you have would be great.