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 }
};