Understanding Essential React Concepts

Sonal DiwanSonal Diwan
3 min read

Table of contents

"Understanding Controlled vs Uncontrolled Inputs and React Portals"

When building forms and modals in React, two important concepts often come up: Controlled vs Uncontrolled Inputs and React Portals. Understanding these will help you write cleaner, more scalable React applications.

🔹 Controlled vs Uncontrolled Inputs in React

In React, controlled and uncontrolled inputs refer to two different ways of handling form elements like <input>, <text area>, etc.

🔸 Controlled Input

A controlled component means React is in control of the input’s value.

✅ Example:

const [name, setName] = useState('');

<input
  type="text"
  value={name}
  onChange={(e) => setName(e.target.value)}
/>

💡 Features:

  • The input’s value is bound to React state.

  • You can easily validate, format, or manipulate the value.

  • Suitable for dynamic forms and advanced UI logic.

  • One source of truth: React state.

🔸 Uncontrolled Input

An uncontrolled component means the DOM is in control of the input’s value.

✅ Example:

const inputRef = useRef();

<input type="text" ref={inputRef} />

// To access the value:
const handleClick = () => {
  console.log(inputRef.current.value);
}

💡 Features:

  • Uses ref to read values from the DOM.

  • Less code and slightly better performance.

  • Suitable for simple or quick forms.

⚖️ Which One is More Efficient?

  • Uncontrolled inputs are slightly faster because they don’t trigger React re-renders on every keystroke.

  • Controlled inputs are more reliable, especially when validation or conditional rendering is involved.

✅ When to Use What?

Use CaseControlledUncontrolled
Form validation✅❌
Conditional rendering✅❌
Simple one-time data grab❌✅
Performance-critical inputs❌✅

🔹 React Portals: What, Why, and How

React Portals provide a way to render a component outside of its parent DOM hierarchy, while still remaining in the React component tree.

🔸 Why Use Portals?

They’re super handy when you want to:

  • Render modals, tooltips, or dropdowns

  • Avoid CSS z-index or overflow issues

  • Maintain a clean component hierarchy

🔸 How It Works

React gives us a function:

ReactDOM.createPortal(child, container)

  • child: JSX you want to render.

  • container: The DOM node to render into.

✅ Example: Modal with Portal

🧱 HTML (public/index.html)

<body>
  <div id="root"></div>
  <div id="modal-root"></div> <!-- Portal Target -->
</body>

⚛️ React Component

import React from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ children, onClose }) => {
  return ReactDOM.createPortal(
    <div className="modal-overlay">
      <div className="modal-content">
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>,
    document.getElementById('modal-root')
  );
};

export default Modal;

🚀 Usage Example

import React, { useState } from 'react';
import Modal from './Modal';

const App = () => {
  const [showModal, setShowModal] = useState(false);

  return (
    <>
      <button onClick={() => setShowModal(true)}>Open Modal</button>
      {showModal && (
        <Modal onClose={() => setShowModal(false)}>
          <h2>This is a Portal Modal!</h2>
        </Modal>
      )}
    </>
  );
};

💡 Benefits Recap

  • Helps render elements outside of complex layouts.

  • Keeps your React component tree intact.

  • Perfect for building accessibility-friendly and stylistically isolated UI.

🧠 Final Thoughts

  • Use controlled inputs when you need flexibility and validation.

  • Use uncontrolled inputs when performance and simplicity are key.

  • Use React portals to create clean, layered UI elements like modals and drop downs without breaking layout logic.

Thanks for reading! 🙌
If you enjoyed this, follow me for more front end deep dives and real-world tips.

0
Subscribe to my newsletter

Read articles from Sonal Diwan directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Reactcontrolled inputsuncontrolled inputsPortal in react aplication

Written by

Sonal Diwan
Sonal Diwan

Data-Driven Fresher | Leveraging full stack technologies | Exploring tech-trends