Understanding react Components as an electrician

Coming from electrical background, I have noticed that many elements of programming resembles electrical systems (which makes sense since at the fundamental level, all programming is a series of electrical signals). Functions that perform tasks on inputs to produce outputs, importance of sequence of operations, and tracing errors in order to troubleshoot were not totally foreign concepts to me as I was familiar with them in electrical field.
Of course, as with all allegory, comparisons starts to break down if you dig too deep but I found thinking of coding as laying down a wiring schematics pretty helpful.
Here are few examples about components that might help you if you're also coming from electrical background.

React Components

Components in react acts as JavaScript functions but in isolation. It takes an input, performs a task or tasks and gives an output. It can be very simple as this example

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

from

or more complex. This is an example of an component from my recent project.

function Pending({ pendings }) {

    const displayPending =  pendings.map(data => {
      return (
        <>
          <ul>
            <h2>{data.name}</h2>
            <h3>{data.city}</h3>
            <li>{data.street}</li>
            <li>{data.directions}</li>
            <br/>
          </ul>
        </>
      )
    })

    return (
    <>    
      { displayPending }
    </>    
    )
}

In this example, Pending component is taking the input of { pendings } and picking out and organizing the values (name, city, street etc) that I want to display (TASK) and displaying them on the page in easy to read fashion (OUTPUT), which is definitely more extensive than the first example.

I think of the first example Car as equivalent to something like a light bulb in electrical system: simple device that performs binary task of on or off. There is no specific input it's looking for. If there is power, light bulb will light up, as will the Car Component will render "Hi, I am a Car!" if it is invoked.

once the switch closes, light bulb gets power input and produces output.

Meanwhile, Pending component example is more like a fan motor that can be set to specific speed: still pretty simple device but it expects a specific input of { pendings } prop object to produce output depending on the input. Just like how variable resistor gives motor specific input and motor outputs at the RPM corresponding to the input.

variable resistor determines input to the motor which will run at corresponding speed.

Thinking of Components as electrical devices that perform specific tasks helped me tremendously. Think about it, in order for an electrical system to work, you have to have correct electrical devices in the system (what's it rated? what's the function?) and in specific way in the schematic so that the sequence of operation is correct. It's the same thing in react. Components have to work correctly on their own, but also work in correct order in order for it to work.

Why isolation?

One of the differences between react Component and Javascript function is that Components are isolated. So why isolate Components? isn't it just extra work?

It is, but there are good reasons for doing it.
One is organization. Organization is more than about just looking pretty (although that is nice).
While I was an EM on the Navy ships, I came across multiple control panels that looked like this

Yes, most of them still worked, but once they didn't troubleshooting was a painful process because of the total chaos that you can see. Digging through all those cables made repairs twice as long as if they were organized.

With Isolated components, we are avoiding large part of this problem all together. In the real world, we would run out of space if we were to make a panel for each device you see in there, but we don't have to worry about that in digital space as much and isolate them as much as we'd like. Organized Isolated components makes working on them much easier down the line, especially when there are multiple people working on the project.

Second reason is maintainability.

Think of a box fan, all the devices (motor, resistor etc) is all contained in the box, and it moves air. So in this analogy, why can't we just put all components together? they should still work the same right?

Yes, but no. Because most react App is more like ventilation system for a building or a ship, it is a better idea to separate components like how ships will separate motor controller from ventilation motors. This practice makes things easier to maintain, troubleshoot and also aids in damage control. Let's say the motor caused a fired. In the box fan example, you'd have to get a whole new box fan, but in the case of shipboard ventilation system, you'd just need to replace the motor since the controller wasn't on fire.

think of box fan as a small lab in lessons

Engine room ventilation system. controllers and fan motors are separated for maintainability purposes.