Controlled components

Code example

const [phoneNumber, setPhoneNumber] = useState("");

<input
  type="text"
  className="form-control"
  id="phone"
  value={phoneNumber}
  onChange={(event) => {
    setPhoneNumber(event.target.value);
  }}
/>;

Step-by-step explanation

1. State declaration

const [phoneNumber, setPhoneNumber] = useState("");

• This line creates a state variable called phoneNumber.
• The initial value of phoneNumber is an empty string ("").
• setPhoneNumber is the setter function that updates the value of phoneNumber.
• Every time setPhoneNumber is called, React re-renders the component with the updated value.

2. Input element

<input
  type="text"
  className="form-control"
  id="phone"
  value={phoneNumber}
  onChange={(event) => {
    setPhoneNumber(event.target.value);
  }}
/>

• The value attribute is set to phoneNumber, which makes this a controlled component.
  • Controlled components get their current value from React state.
• The onChange event fires every time the user types in the input.
• event.target.value contains the new text that the user typed.
• setPhoneNumber(event.target.value) updates the state with that new text.

Summary

• useState manages the input's value.
• The value prop ties the input field to React state.
• The onChange handler keeps state and the input box in sync.

So, when the user types into the input box:

1. The onChange event triggers.
2. React updates the state with the new value.
3. The input's displayed value updates automatically.

useState vs. useRef

useState

• Stores stateful data that's tied to the component's lifecycle.
• When you call the setter (e.g. setCount(count + 1)), React re-renders the component so the UI reflects the new value.
• Value updates are reactive and cause renders.

useRef

• Stores a mutable value that persists across renders, but updating it does not trigger a re-render.
• It's great for:
  • Keeping track of DOM elements
  • Storing "instance variables" (values you want to keep around without re-rendering)
  • Caching values between renders (like previous props)
  • Accessed via myRef.current.

Environment Variables in Create React App (CRA)

🎯 Goal of Environment Variables

Environment variables allow you to store configuration values outside of your code, such as API keys, base URLs, or feature flags. This helps:

• Keep sensitive data out of version control
• Make your app easier to configure for different environments (e.g., development, staging, production)
• Avoid hardcoding values directly in source files

⚙️ How They Work in Create React App

• CRA automatically reads environment variables from .env files or the system environment.

• Only variables prefixed with REACT_APP_ are exposed to the browser.

  REACT_APP_API_URL=https://api.example.com

• You can access these in your React code via:

  const apiUrl = process.env.REACT_APP_API_URL;

• CRA supports multiple .env files for different environments:

  • .env — loaded in all environments
  • .env.development — for development only
  • .env.production — for production builds

🚫 Security Note

All environment variables exposed to your React app are embedded in the client-side bundle, so do not store secrets like API keys meant to stay private.