Forgive me for asking a possibly very stupid question.
My understanding is that Functional Components in React are functional because they return a view, their state cannot be directly mutated and must be done through setState() functions. They don't have any variables that are directly changed, at least in the sense we can't update them like var = 'something'.
My confusion is that, even though we are setting the state using these functions, it's still entirely possible to have logic dependent on that state being in a particular way. There is less procedural code in functional components, but it still exists through useEffects which modify this state at certain points. So even though we're doing it through a function, the state is still being mutated at certain points.
I think there is probably a gap in my understanding of functional programming. In my head at the moment, it seems like FP requires a state at the highest level of the program that doesn't change. But most applications do need some sort of state change, if not at this high application level then at a local component level, otherwise the components wouldn't do anything.
What I understand right now is FP = very little changing state, everything is computed on the fly but the state at the top remains the same
So even if we have reducers etc. in something like redux, we are still mutating the state in the end? Yes there is a history of the state changes this way but what's the benefit apart from this? Not a sarcastic comment I'm genuinely confused
I hope that makes sense. I know I'm wrong, I just don't understand how I'm wrong. If someone can help me out it would be greatly appreciated.
Perhaps this is oversimplifying, but at this stage functional components are only really called as such because they're defined as functions (rather than classes). Post react-hooks, they have very little to do with functional programming. A pure function a la functional programming would have no state nor side-effects: every time you ran it with the same parameters, it would return the same output, and it wouldn't affect any external state. React functional components aren't that—or at least they don't have to be. If you're using useEffect, useState, etc, you're not doing functional programming: you're just writing a react component which happens to be defined as a function.
Also, having to use setState (or the function returned by useState) to manage state isn't something that relates to functional programming: any kind of internal state management is already anti-functional, but the reason you need to use these functions to modify state in React (in both class and functional components) is just so react can track when state changes have been made and queue components for re-rendering.