This is the second project in a seven-part series aimed at improving your React development skills. This repository focuses on teaching you how to use the three most common React hooks—useState
, useEffect
, and useContext
. These hooks enable the use of state and other React features in functional components without writing a class.
To run the application, follow these instructions:
- Install Node.js version 14.21.3:
nvm install v14.21.3
nvm use v14.21.3
- Install necessary packages:
npm install
- Start the application:
npm start
- Top Level Only: Always use hooks at the top level of your React functions. Do not call hooks inside loops, conditions, or nested functions.
- React Functions Only: Hooks should only be used within React functional components, not in regular JavaScript functions.
- Purpose: Enables state management in function components
- Features:
- Syntax Example:
[state, setState] = React.useState('initialValue')
- Purpose: Allows you to perform side effects (i.e. updating the DOM, fetching data from API endpoints, setting up subscriptions / timers) in your component.
- Syntax Example:
useEffect(func1, [])
- Features:
- Function Execution: By default, func1 runs after every component render but can be controlled with dependencies. Code
- Cleanup Function: Optional return that acts as a cleanup mechanism. Code
- Dependency Array: Specify variables that control the re-invocation of the effect. Conditionally firing an effect. Code
- Fetching data: See Data Fetching Example which demonstrates using
axios
for API requests.
- Purpose: Provides a way to share values like props but across the entire component tree, without manually passing props to every level.
- Implementation:
- Initialize context values: Component 1 Example
- Use context values: Component 3 Example
This project is part of a comprehensive learning series: