Using React and React Hooks to Switch Electric Lights and Read Real Sensors 🔋💡

What if I told you it’s possible to program real-world electric components with React? Yes, that’s right! You can get electric sensors to update a React component’s state and switch circuits on and off based on state and props.

All this with React Hooks!

Why?

I’ve been using React for over 6 years for web apps and it’s awesome! But not being able to use it for my electronic projects is quite disappointing.

My ultimate goal was to be able to use React’s most powerful features on real-world electric circuits: components, states, props, life-cycle methods, hooks, JSX.

You could even use React and React Hooks to program Smart Home Automations!

What?

We are going to demonstrate all this with a simple light sensor and an LED light. The measurements from the sensor will be kept in a React state and the LED light will switch on when the light level is below the set threshold.

This is what our finished application logic will roughly look like:

const World = () => {
  const [lightLevel, setLightLevel] = useState(0);
  
  return (
    <>
      <Led pin="6"…