**Course Title:** Mastering TypeScript: From Basics to Advanced Applications **Section Title:** TypeScript with React **Topic:** Creating functional components and hooks with TypeScript ### Overview In this topic, we'll cover the fundamentals of creating functional components and hooks in React using TypeScript. We'll explore the concept of functional components, how to define props and state, and introduce the use of React hooks. By the end of this topic, you'll be able to create and use functional components and hooks in your React applications with confidence. ### What are functional components? Functional components are a type of React component that doesn't have its own state or lifecycle methods. They are essentially pure functions that take in props and return JSX elements. To create a functional component in React with TypeScript, you can use the following syntax: ```typescript import * as React from 'react'; interface Props { name: string; } const Greeting: React.FC<Props> = ({ name }) => { return <h1>Hello, {name}!</h1>; }; ``` In this example, we define a `Greeting` component that takes in a `name` prop and returns an `h1` element with the greeting message. ### Defining props and state In functional components, props are defined using the `interface` keyword. You can define props with their corresponding types, as shown in the `Greeting` component example above. State in functional components is managed using the `useState` hook, which we'll cover later in this topic. ### Using React hooks React hooks are a new way to use state and other React features in functional components. There are several types of hooks available in React, but we'll focus on the most commonly used ones: 1. **useState**: This hook allows you to manage state in functional components. 2. **useEffect**: This hook allows you to run side effects in functional components, such as fetching data or setting up timers. 3. **useContext**: This hook allows you to access context in functional components. Let's take a closer look at each of these hooks. #### useState The `useState` hook is used to manage state in functional components. It takes an initial state value as an argument and returns an array with the current state value and an `updateState` function. Here's an example of using `useState` to manage a counter state: ```typescript import * as React from 'react'; const Counter: React.FC = () => { const [count, setCount] = React.useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); }; ``` In this example, we define a `Counter` component that uses the `useState` hook to manage a counter state. The `useState` hook returns an array with the current state value and an `updateState` function, which we use to increment the counter state. #### useEffect The `useEffect` hook is used to run side effects in functional components. It takes a function as an argument that contains the side effect code. Here's an example of using `useEffect` to fetch data from an API: ```typescript import * as React from 'react'; const UserList: React.FC = () => { const [users, setUsers] = React.useState([] as any[]); React.useEffect(() => { fetch('https://api.example.com/users') .then(response => response.json()) .then(users => setUsers(users)); }, []); return ( <ul> {users.map(user => ( <li key={user.id}>{user.name}</li> ))} </ul> ); }; ``` In this example, we define a `UserList` component that uses the `useEffect` hook to fetch data from an API. The `useEffect` hook contains the side effect code, which we use to fetch the data and update the component state. #### useContext The `useContext` hook is used to access context in functional components. It takes a context object as an argument and returns the context value. Here's an example of using `useContext` to access a theme context: ```typescript import * as React from 'react'; import { ThemeContext } from './theme'; const Button: React.FC = () => { const theme = React.useContext(ThemeContext); return ( <button style={{ backgroundColor: theme.backgroundColor, color: theme.textColor }}> Click me! </button> ); }; ``` In this example, we define a `Button` component that uses the `useContext` hook to access a theme context. The `useContext` hook returns the theme context value, which we use to style the button. ### Creating and using hooks To create and use your own hooks, you need to follow these steps: 1. Define a function that starts with the word "use". 2. Use the `useState`, `useEffect`, or `useContext` hook within the function. 3. Return a value from the function. Here's an example of creating a custom `useFetch` hook: ```typescript import * as React from 'react'; const useFetch = <T>(url: string): T => { const [data, setData] = React.useState<T | null>(null); React.useEffect(() => { fetch(url) .then(response => response.json()) .then(data => setData(data)); }, [url]); return data; }; ``` In this example, we define a `useFetch` hook that takes a URL as an argument and returns the fetched data. You can use the `useFetch` hook in a component like this: ```typescript import * as React from 'react'; import { useFetch } from './useFetch'; const UserList: React.FC = () => { const users = useFetch('https://api.example.com/users'); return ( <ul> {users.map(user => ( <li key={user.id}>{user.name}</li> ))} </ul> ); }; ``` In this example, we define a `UserList` component that uses the `useFetch` hook to fetch data from an API. ### Best practices Here are some best practices to keep in mind when creating and using hooks: * Always start the hook function name with the word "use". * Use the `useState`, `useEffect`, or `useContext` hook within the hook function. * Return a value from the hook function. * Use the `useCallback` hook to memoize expensive function calls. * Use the `useMemo` hook to memoize expensive computations. ### Conclusion In this topic, we covered the fundamentals of creating functional components and hooks in React with TypeScript. We explored the concept of functional components, how to define props and state, and introduced the use of React hooks. You can find more information about React hooks in the [React documentation](https://reactjs.org/docs/hooks-intro.html). If you have any questions or need further clarification, please leave a comment below. In the next topic, we'll cover type checking props and state in React components. #### What's next? * [Type checking props and state in React components](/type-checking-props-and-state) * [React documentation](https://reactjs.org/) * [TypeScript documentation](https://www.typescriptlang.org/docs/)