Full Stack Flashcards
What is the purpose of the useState hook in React?
useState allows you to add state to functional components by providing a state variable and an updater function. For example:
const [articleInfo, setArticleInfo] = useState({ upvotes: 0, comments: [] });
How do you update state using the function returned by useState?
You update state by calling the updater function with the new state value. For example:
setArticleInfo(newData);
This triggers a re-render of the component with the updated state.
What is the role of useEffect in React?
useEffect is used for performing side effects in function components, such as fetching data, subscribing to events, or manually manipulating the DOM, after the component renders.
Why must you avoid making the function passed directly to useEffect asynchronous?
Because an async function returns a promise, and useEffect expects the callback to return either nothing or a cleanup function. Instead, define and invoke an inner async function within the effect.
How do you properly handle asynchronous operations inside useEffect?
Define an inner asynchronous function and call it immediately. For example:
useEffect(() => {
const loadArticleInfo = async () => {
const response = await axios.get(http://localhost:8000/api/articles/${articleId});
setArticleInfo(response.data);
};
loadArticleInfo();
}, [articleId]);
What does the dependency array ([articleId]) in useEffect do?
The dependency array tells React when to re-run the effect. The effect runs after the initial render and whenever any value in the dependency array changes. An empty array ([]) means the effect runs only once on mount.
What is Axios and how is it used in your React code?
Axios is a promise-based HTTP client used to make requests to a backend API. In your code, it’s used to fetch article data with a GET request and to send an upvote with a PUT request.
How do you use Axios with async/await to handle HTTP requests?
You call Axios methods inside an async function and await their response. For example:
javascript
Copy
const { data } = await axios.put(http://localhost:8000/api/articles/${articleId}/upvote);
How is a full-stack action implemented in the code when a button is clicked?
When the “Upvote” button is clicked, the addUpVote function is triggered. This function makes an asynchronous PUT request to the backend to update the upvotes, then updates the local state with the response, refreshing the UI.
What is CORS, and why might you encounter a CORS error when connecting your React frontend to your backend?
CORS (Cross-Origin Resource Sharing) is a browser security feature that restricts web pages from making requests to a different origin unless allowed by the server. A CORS error occurs when the server doesn’t include the necessary headers (e.g., Access-Control-Allow-Origin) to permit requests from the frontend’s origin.
How can you resolve CORS issues in a Node.js (Express) server using ES modules?
Install and import the cors package, then use it as middleware in your Express app:
javascript
Copy
import express from ‘express’;
import cors from ‘cors’;
const app = express();
app.use(cors());
This automatically adds the appropriate CORS headers to responses.
