Controlled vs UnControlled Components in React JS

Frontbackgeek.com By Frontbackgeek July 4, 2023

Controlled Component

[{"selector":"#anim-feba6680-399b-495d-8bb8-f6bd843a9bce [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] Inside a controlled component each of the elements has its own state, which helps to detect the changes and update the elements on User Interface.

UnControlled Component

[{"selector":"#anim-14b4f453-2809-4357-aa76-d8939e466835 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] Opposite to controlled components, An uncontrolled component has direct access to the HTML elements and basically in react we achieve this by using useRef Hook.

Click to read more with code examples

[{"selector":"#anim-e5d6ce85-841d-4742-a4ca-2a6752184551 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]