Some questions about React

[nguyenhoanghai1605]

1. When should you use TypeScript with React instead of just JavaScript?
2. How to declare styles for props in a React component?
3. What is the difference between interface and type in TypeScript? Which one to use for props?
4. How to define a functional component with TypeScript?
5. How to declare types for useState, useReducer, useRef, useContext in React + TypeScript?
6. How to style events in handlers like onClick, onChange, onSubmit...?
7. How to use TypeScript utility types like Partial, Pick, Record, Omit in React?

[JohnnyJee]

That's a good question.

[honeyforce]

1.When should you use TypeScript with React instead of just JavaScript?
✅ When your project is medium/large or will grow in complexity.
✅ When you want type safety to catch errors at compile time.
✅ When you work in a team or contribute to open source (for better code clarity).
✅ When you want better IDE support (auto-complete, refactoring).
2.How to declare styles for props in a React component?
You can type style props as React.CSSProperties:
type MyComponentProps = {
style?: React.CSSProperties;
};

const MyComponent: React.FC<MyComponentProps> = ({ style }) => (
<div style={style}>Hello</div>
);

3.What is the difference between interface and type in TypeScript? Which one to use for props?

Feature	interface	type
Extendable	Yes (can merge with other interfaces, declaration merging)	No (but can intersect with &)
Suitable for props	✅ Yes	✅ Yes
Preferred?	Often preferred for props because of easier extension	Fine too, especially for unions & mapped types

4.How to define a functional component with TypeScript?
✅ The cleanest way:

interface Props {
    title: string;
}

const MyComponent: React.FC<Props> = ({ title }) => {
    return <h1>{title}</h1>;
};

5. How to declare types for useState, useReducer, useRef, useContext?

• useState
  const [count, setCount] = useState(0);

• useReducer
  type State = { count: number };
  type Action = { type: 'increment' | 'decrement' };

  const reducer = (state: State, action: Action): State => { /* logic */ };
  const [state, dispatch] = useReducer(reducer, { count: 0 });

6.How to style events in handlers like onClick, onChange, onSubmit...?

const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => { /* ... */ };
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { /* ... */ };
    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // ...
};

7.How to use TypeScript utility types like Partial, Pick, Record, Omit in React?
- Partial: Make all props optional
type PartialProps = Partial<{ title: string; age: number }>;
- Pick: Pick specific props
type PickedProps = Pick<{ title: string; age: number; name: string }, 'title' | 'name'>;
- Omit: Exclude certain props
type WithoutAge = Omit<{ title: string; age: number; name: string }, 'age'>;
- Record: Map keys to types
const styles: Record<string, React.CSSProperties> = {
header: { color: 'red' },
body: { fontSize: 14 }
};

[aaftab-vijapura]

yah that's nice

[aaftab-vijapura]

1. When should you use TypeScript with React instead of just JavaScript?
   Use TypeScript with React when:

Type safety is important — it catches type errors during development, not at runtime.

You work in medium/large projects where many developers contribute.

You need better IntelliSense and autocompletion in editors like VS Code.

The codebase must be more maintainable and self-documenting (types explain your data shape).

You're integrating complex APIs or libraries where types help avoid mistakes.
JavaScript is fine for quick prototypes or very small projects, but TypeScript reduces bugs in production.

2. How to declare styles for props in a React component?
   You can declare a prop that accepts CSS styles like this:

tsx
Copy
Edit
import React from "react";

interface MyButtonProps {
label: string;
style?: React.CSSProperties; // Type for style object
}

const MyButton: React.FC = ({ label, style }) => {
return {label};
};

export default MyButton;
React.CSSProperties ensures that only valid CSS properties are allowed.

3. What is the difference between interface and type in TypeScript? Which one to use for props?

Interface

Can be extended (like inheritance).

Can merge declarations (multiple interface declarations combine).

Mostly used for object shapes and contracts.

Type

Can represent unions, intersections, primitives, tuples, and more.

Cannot merge declarations.

More flexible but less “extendable” in some cases.

Which to use for props?

If you only need an object shape → use interface (cleaner for props).

If you need union types or complex compositions → use type.

4. How to define a functional component with TypeScript?

tsx
Copy
Edit
import React from "react";

interface GreetingProps {
name: string;
}

const Greeting: React.FC = ({ name }) => {
return

Hello, {name}

;
};

export default Greeting;
Alternatively, without React.FC (for stricter typing of children):

tsx
Copy
Edit
const Greeting = ({ name }: GreetingProps) =>

Hello, {name}

;

5. How to declare types for useState, useReducer, useRef, useContext in React + TypeScript?

useState

tsx
Copy
Edit
const [count, setCount] = useState(0);
useReducer

tsx
Copy
Edit
type State = { count: number };
type Action = { type: "increment" } | { type: "decrement" };

const reducer = (state: State, action: Action): State => {
switch (action.type) {
case "increment": return { count: state.count + 1 };
case "decrement": return { count: state.count - 1 };
default: return state;
}
};

const [state, dispatch] = useReducer(reducer, { count: 0 });
useRef

tsx
Copy
Edit
const inputRef = useRef<HTMLInputElement | null>(null);
useContext

tsx
Copy
Edit
interface Theme {
color: string;
}
const ThemeContext = React.createContext<Theme | null>(null);

const theme = useContext(ThemeContext);

6. How to style events in handlers like onClick, onChange, onSubmit...?

Each event in React + TypeScript has a specific type:

tsx
Copy
Edit
const handleClick = (e: React.MouseEvent) => {
console.log("Button clicked");
};

const handleChange = (e: React.ChangeEvent) => {
console.log(e.target.value);
};

const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log("Form submitted");
};

7. How to use TypeScript utility types like Partial, Pick, Record, Omit in React?

Partial — makes all properties optional.

tsx
Copy
Edit
interface User { name: string; age: number; }
type PartialUser = Partial;
const u: PartialUser = { name: "Alice" }; // age optional
Pick — selects specific properties.

tsx
Copy
Edit
type UserName = Pick<User, "name">;
Record — defines a type with a fixed key-value mapping.

tsx
Copy
Edit
type RolePermissions = Record<string, boolean>;
const permissions: RolePermissions = { admin: true, guest: false };
Omit — removes specific properties.

tsx
Copy
Edit
type UserWithoutAge = Omit<User, "age">;
In React, these are useful for making flexible props:

tsx
Copy
Edit
interface ButtonProps {
label: string;
onClick: () => void;
disabled?: boolean;
}

type OptionalButton = Partial; // All props optional