Forem: Lucas Stifano

10 React Interview Questions & Answers

Lucas Stifano — Wed, 24 May 2023 19:37:14 +0000

In a technical interview focused on React.js, the interviewer would likely ask questions that touch upon various aspects of the library, its features, concepts, and best practices.

Here are 10 must know interview questions that you should know when interviewing for a job in React:

1. Explain the virtual DOM in React?

React's virtual DOM is an abstraction of the actual DOM. It's a lightweight copy of the actual DOM that React uses to understand what parts of the real DOM need to change when an event happens (like user interaction or data arrival).

2. What is JSX and how does it relate to React?

JSX is a syntax extension for JavaScript which is used to describe what the UI should look like. It is not necessary to use React but it's recommended due to its readability and simplicity.

3. What is the significance of keys in React?

Keys are used by React to identify individual elements. They're necessary when creating arrays of elements, as they help React optimize re-rendering by quickly identifying changes among siblings.

4. What are the lifecycle methods in a React Component?

Lifecycle methods control what happens from the time a component is created to when it is destroyed. As of React 16.3, there are different lifecycle methods, including constructor(), render(), componentDidMount(), shouldComponentUpdate(), getSnapshotBeforeUpdate(), componentDidUpdate(), and componentWillUnmount().

5. What are state and props in React?

State and props are ways that data gets handled in React. State is internal to a component and controls the behavior of the component from within. Props (short for properties) are external and control the component from outside.

6. What are functional components vs class components in React?

Functional components are simply JavaScript functions that return JSX. Class components are ES6 classes that extend from React.Component and have a render method.

7. What is Redux and how does it work with React?

Redux is a state management library. It helps manage global state in an application, beyond the state of individual components. It works well with React because it allows for predictable flow of data and more consistent behavior.

8. Can you describe how to implement forms in React?

Forms in React can be implemented using controlled or uncontrolled components. You'd typically use the state to control the inputs' values and define functions to handle changes and submission.

9. What are hooks in React?

Hooks are a new addition in React 16.8 that let you use state and other React features without writing a class. Examples are useState, useEffect, useContext, etc.

10. What is the context API in React?

The Context API is a way to share values between components without having to explicitly pass a prop through every level of the tree. Context is primarily used when some data needs to be accessible by many components at different nesting levels.

If you found this helpful be sure to connect with me on LinkedIn!

Connect

7 Must Know Custom React Hooks in React 18

Lucas Stifano — Fri, 24 Mar 2023 19:10:04 +0000

Introduction:

React 18 has introduced several new features, including concurrent rendering, automatic batching, and more. These improvements have made it easier than ever to create advanced custom hooks, enhancing the overall developer experience. In this article, we will dive into some commonly used custom hooks in React, examine how they have evolved with React 18, and provide code examples to demonstrate their usage.

1. useAsync

The useAsync hook makes it simple to handle asynchronous operations like fetching data, API calls, and more. With the new startTransition feature in React 18, we can now create a smoother user experience by delaying visual updates.

// Import the useState and useEffect hooks from the React library
import { useState, useEffect } from "react";

// Define a custom hook named useAsync that takes two arguments:
// an async function to execute and an array of dependencies to watch for changes
function useAsync(asyncFunction, deps) {

  // Create three state variables using the useState hook:
  // data, which will hold the result of the async function
  // error, which will hold any error thrown by the async function
  // isLoading, which will track whether the async function is currently executing
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  // Use the useEffect hook to execute the async function whenever any of the dependencies change
  useEffect(() => {
    // Set the isLoading state variable to true
    setIsLoading(true);
    // Execute the async function and update the data and error state variables
    // based on its success or failure, respectively
    asyncFunction()
      .then(setData)
      .catch(setError)
      .finally(() => setIsLoading(false));
  }, deps);

  // Return an object containing the data, error, and isLoading state variables,
  // which can be used by components that use this custom hook to access the results
  // of the async function and track its progress
  return { data, error, isLoading };
}

2. useDebounce

The useDebounce custom hook prevents unnecessary re-renders by delaying the execution of a function until a specified period of time has passed. React 18's automatic batching feature helps to further optimize performance in these scenarios.

// Import the useState and useEffect hooks from the React library
import { useState, useEffect } from "react";

// Define a custom hook named useDebounce that takes two arguments:
// a value to debounce and a delay time in milliseconds
function useDebounce(value, delay) {

  // Create a state variable named debouncedValue using the useState hook
  // and initialize it with the provided value
  const [debouncedValue, setDebouncedValue] = useState(value);

  // Use the useEffect hook to create and clean up a timer that sets the debouncedValue
  // state variable to the provided value after the specified delay time
  useEffect(() => {
    // Define a handler function that sets the debouncedValue state variable
    // to the provided value after the specified delay time
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // Return a cleanup function that clears the timer using the clearTimeout function
    return () => clearTimeout(handler);
  }, [value, delay]);

  // Return the debouncedValue state variable, which will be updated after the specified
  // delay time and can be used by components that use this custom hook
  return debouncedValue;
}

3. usePrevious

The usePrevious custom hook allows you to access the previous value of a prop or state, which can be useful in many scenarios. React 18's new features do not directly impact this hook, but it remains a valuable tool for developers.

// Import the useRef and useEffect hooks from the React library
import { useRef, useEffect } from "react";

// Define a custom hook named usePrevious that takes a single argument: a value
function usePrevious(value) {

  // Create a reference variable named ref using the useRef hook
  const ref = useRef();

  // Use the useEffect hook to update the ref variable with the current value
  // whenever the value changes
  useEffect(() => {
    ref.current = value;
  }, [value]);

  // Return the previous value, which is stored in the ref variable
  return ref.current;
}

4. useDarkMode

The useDarkMode custom hook can be used to toggle between light and dark themes based on user preferences or system settings. React 18's concurrent rendering feature can improve the user experience during theme transitions.

// Import the useState and useEffect hooks from the React library
import { useState, useEffect } from "react";

// Define a custom hook named useDarkMode
function useDarkMode() {

  // Create a state variable named isDarkMode using the useState hook
  // and initialize it with a value of false
  const [isDarkMode, setIsDarkMode] = useState(false);

  // Use the useEffect hook to check if the user prefers a dark color scheme
  // and update the isDarkMode state variable accordingly
  useEffect(() => {
    // Check if the user's preferred color scheme matches "dark"
    const prefersDarkMode = window.matchMedia(
      "(prefers-color-scheme: dark)"
    ).matches;
    // Update the isDarkMode state variable with the result
    setIsDarkMode(prefersDarkMode);
  }, []);

  // Return an array containing the isDarkMode state variable and the setIsDarkMode function,
  // which can be used by components that use this custom hook to read from and write to
  // the corresponding value for the user's preferred color scheme
  return [isDarkMode, setIsDarkMode];
}

5. useLocalStorage

The useLocalStorage custom hook allows you to synchronize a state with the browser's localStorage, making it easy to persist data across page refreshes or multiple sessions. This hook works seamlessly with React 18's features.

// Import the useState and useEffect hooks from the React library
import { useState, useEffect } from "react";

// Define a custom hook named useLocalStorage that takes two arguments:
// a key to identify the stored value and an initial value to use if the key
// is not found in localStorage
function useLocalStorage(key, initialValue) {

  // Create a state variable named storedValue using the useState hook
  // and initialize it with the value retrieved from localStorage, if present,
  // or the provided initial value otherwise
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error("Error reading from localStorage:", error);
      return initialValue;
    }
  });

  // Define a setValue function that updates the storedValue state variable
  // and stores the new value in localStorage using the provided key
  const setValue = (value) => {
    try {
      // If the provided value is a function, use it to calculate the new value
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      // Update the storedValue state variable
      setStoredValue(valueToStore);
      // Store the new value in localStorage using the provided key
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error("Error writing to localStorage:", error);
    }
  };

  // Return an array containing the storedValue state variable and the setValue function,
  // which can be used by components that use this custom hook to read from and write to
  // the corresponding value in localStorage
  return [storedValue, setValue];
}

6. useInterval

The useInterval custom hook provides a convenient way to manage intervals within your React components. It allows you to set up and clean up timers automatically based on component lifecycle events. React 18's new features do not directly impact this hook, but it remains a useful utility for managing periodic tasks.

// Import the useRef and useEffect hooks from the React library
import { useRef, useEffect } from "react";

// Define a custom hook named useInterval which takes two arguments:
// a callback function and a delay time in milliseconds
function useInterval(callback, delay) {

  // Create a reference to the callback function using the useRef hook
  const savedCallback = useRef();

  // Use the useEffect hook to update the savedCallback reference whenever
  // the callback function changes
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Use the useEffect hook to create and clean up an interval timer
  // based on the provided delay time
  useEffect(() => {

    // Define a tick function that calls the savedCallback function
    const tick = () => {
      savedCallback.current();
    };

    // If the delay time is not null, create a new interval timer
    // using the setInterval function and return a cleanup function
    // that clears the interval timer using the clearInterval function
    if (delay !== null) {
      const id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

7. useWindowSize

The useWindowSize custom hook allows you to access and respond to the current window size. It can be helpful for creating responsive designs or handling resizing events. React 18's new features do not directly impact this hook, but it remains a valuable tool for developers.

You can use this hook in your components to get the current window size and respond to changes in size. For example, you can conditionally render certain components based on the window width or height.

// Import the useState and useEffect hooks from the React library
import { useState, useEffect } from "react";

// Define a custom hook named useWindowSize
function useWindowSize() {

  // Create a state variable named windowSize using the useState hook
  // and initialize it with an object containing the current window's width and height
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  // Define a handleResize function that updates the windowSize state variable
  // with the current window's width and height whenever the window is resized
  const handleResize = () => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight
    });
  };

  // Use the useEffect hook to add and remove a "resize" event listener
  // that calls the handleResize function whenever the window is resized
  useEffect(() => {
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  // Return the windowSize state variable, which will be updated whenever the
  // window is resized and can be used by components that use this custom hook
  return windowSize;
}

Connect with me!

Conclusion:

React 18 has ushered in a new era of performance and user experience improvements. By leveraging the latest features and building advanced custom hooks, developers can create more efficient and powerful applications. The examples provided in this article demonstrate how these hooks can be adapted and improved with React 18, offering new possibilities for React developers.

Flattening Arrays with flat() and flatMap() in JavaScript

Lucas Stifano — Wed, 22 Mar 2023 00:25:12 +0000

Introduction

Ah, nested arrays, the Matryoshka dolls of the JavaScript world. They're everywhere, hiding layers of data within layers of data. Thankfully, ECMAScript 2019 introduced two new methods, flat() and flatMap(), that make it easier to work with multidimensional arrays. In this article, we'll explore how to use these methods to flatten arrays effectively. Let's get started!

Understanding flat() and flatMap()

In JavaScript, handling nested arrays is a common and often challenging task. To simplify the process of working with multidimensional arrays, we mentioned ECMAScript 2019 introduced two powerful methods: flat() and flatMap(). The flat() method is designed to flatten nested arrays up to a specified depth level, creating a new, single-level array. On the other hand, flatMap() combines the capabilities of both map() and flat(). It first applies a mapping function to each element of the array and then flattens the resulting array up to a depth of 1. By utilizing these two methods, developers can efficiently manipulate and process nested arrays, resulting in cleaner and more readable code.

Using flat()

The flat() method is used to create a new array by recursively flattening the input array up to a specified depth.

Syntax:

array.flat([depth]);

Parameters:

depth (Optional): The depth level specifying how deep the input array should be flattened. The default value is 1.

Example:

const nestedArray = [1, [2, [3, [4]], 5]];

const flattenedArray = nestedArray.flat();
console.log(flattenedArray); // Output: [1, 2, [3, [4]], 5]

By default, the flat() method only flattens the input array up to one level deep. To flatten the array up to a specific depth, you can pass the desired depth as an argument:

const nestedArray = [1, [2, [3, [4]], 5]];

const flattenedArray = nestedArray.flat(2);
console.log(flattenedArray); // Output: [1, 2, 3, [4], 5]

To flatten the array completely, you can pass Infinity as the depth:

const nestedArray = [1, [2, [3, [4]], 5]];

const flattenedArray = nestedArray.flat(Infinity);
console.log(flattenedArray); // Output: [1, 2, 3, 4, 5]

Real-World Example: Aggregating API Responses

A common use case for flat() in software development is when dealing with data from multiple API endpoints. Often, data from different sources may come in the form of nested arrays that need to be combined into a single array for further processing or display.

Let's assume we have a blog platform, and we want to aggregate the latest blog posts from several authors. We fetch blog post data from different API endpoints, and each response returns an array of blog posts. To combine these arrays and create a single array of blog posts, we can use flat().

Here's an example:

// Simulated API responses containing arrays of blog posts from different authors
const author1Posts = [
  { title: 'JavaScript Best Practices', date: '2023-01-10' },
  { title: 'React vs. Vue', date: '2023-01-15' },
];

const author2Posts = [
  { title: 'Getting Started with Node.js', date: '2023-01-05' },
  { title: 'Express.js for Beginners', date: '2023-01-20' },
];

const author3Posts = [
  { title: 'Demystifying CSS Grid', date: '2023-01-12' },
  { title: 'Responsive Design Techniques', date: '2023-01-18' },
];

// Combine the arrays using flat()
const allPosts = [author1Posts, author2Posts, author3Posts].flat();

console.log(allPosts);

/* Output: [
  { title: 'JavaScript Best Practices', date: '2023-01-10' },
  { title: 'React vs. Vue', date: '2023-01-15' },
  { title: 'Getting Started with Node.js', date: '2023-01-05' },
  { title: 'Express.js for Beginners', date: '2023-01-20' },
  { title: 'Demystifying CSS Grid', date: '2023-01-12' },
  { title: 'Responsive Design Techniques', date: '2023-01-18' }
] */

In this example, we used flat() to combine the arrays of blog posts from different authors into a single, flattened array. This allows us to easily process and display the aggregated blog posts on the platform.

Of course, in a real-world scenario, you would fetch the data from actual API endpoints using techniques such as fetch() or axios, but this example demonstrates how flat() can be effectively used to combine nested arrays into a single array for further processing.

Using flatMap()

The flatMap() method combines the functionality of map() and flat(). It first maps each element using a mapping function, then flattens the resulting array up to a depth of 1. The flatMap() method is particularly useful when you want to process and flatten elements in a single step.

Syntax:

array.flatMap(mappingFunction);

Parameters:

mappingFunction: A function that produces an element of the new array, taking three arguments: the current element's value, the current element's index, and the array being traversed.

Example:

const array = [1, 2, 3, 4];

const flattenedArray = array.flatMap((value) => [value, value * 2]);
console.log(flattenedArray); // Output: [1, 2, 2, 4, 3, 6, 4, 8]

In this example, the flatMap() method processes each element of the input array and returns a new array containing the original value and the doubled value. The resulting array is flattened by default.

Real-World Example: Search Autocomplete Suggestions

One common use case for flatMap() is in search autocomplete functionality, where we need to generate a list of suggested search terms based on the user's input. This often involves processing and combining data from multiple sources, such as popular search terms, user search history, and related search terms.

Let's say we have an e-commerce website and want to provide autocomplete suggestions for our search bar. We have three different data sources:

Popular search terms
User's search history
Related search terms based on the user's input

We need to process each data source, generate an array of suggestions, and then flatten the final array to display the suggestions.

Here's an example of how we can use flatMap() to achieve this:

const popularSearchTerms = ['laptop', 'smartphone', 'headphone'];
const userSearchHistory = ['tablet', 'touchscreen'];
const relatedSearchTerms = ['mouse', 'keyboard'];

// Function to process search terms and generate suggestions
const processSearchTerms = (term) => {
  // In a real-world scenario, more complex logic would be applied to generate suggestions
  // For this example, we'll simply return the term and its plural form
  return [term, `${term}s`];
};

// Combine and process search terms using flatMap()
const searchSuggestions = [
  ...popularSearchTerms,
  ...userSearchHistory,
  ...relatedSearchTerms,
].flatMap(processSearchTerms);


console.log(searchSuggestions);

// Output: [
//   'laptop', 'laptops', 'smartphone', 'smartphones', 'headphone', 'headphones',
//   'tablet', 'tablets', 'touchscreen', 'touchscreens',
//   'mouse', 'mouses', 'keyboard', 'keyboards'
// ]

In this example, we used flatMap() to process each search term from the combined array and generate an array of suggestions. The final searchSuggestions array is flattened, making it suitable for displaying autocomplete suggestions in the search bar.

Of course, this is a simplified example, and in a real-world scenario, the processing logic would be more complex, and the generated suggestions would be more relevant. Nonetheless, it demonstrates how flatMap() can be effectively used to process and combine data from multiple sources into a flattened array.

Conclusion

And there you have it! Our newfound friends flat() and flatMap() have proven themselves to be the dynamic duo of JavaScript array manipulation. These methods are powerful tools for working with nested arrays in JavaScript. They allow you to flatten arrays up to a specified depth and simplify the process of mapping and flattening simultaneously. By understanding and using these methods, you can write cleaner, more efficient code when working with multidimensional arrays. Happy coding!

Node.js/MongoDB/Express.js Tutorial: Saving and Displaying JSON Data

Lucas Stifano — Sat, 18 Mar 2023 20:12:09 +0000

Introduction

In this tutorial, we will create a Node.js application using Express.js and MongoDB to save JSON data to a database and display it at the root URL.

Prerequisites

Basic understanding of JavaScript, Node.js, and Express.js
Node.js installed on your machine
A MongoDB account and cluster set up (Atlas recommended)

Step 1: Set Up Your Project

Create a new directory for your project and open the folder in VSCode. Then, create a new server.js file and a data.json file in your project directory.

Your empty project should look like this:

📦challenge-6
 ┣ 📜data.json
 ┗ 📜server.js

Initialize a new Node.js project:

npm init -y

Install the required packages:

npm install express mongodb fs

Your empty project should now look like this:

📦challenge-6
 ┣ 📂node_modules
 ┣ 📜data.json
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┗ 📜server.js

We need to change the import type to ESM imports in order to get our basic application working properly.

In your package.json file we need to change the imports TYPE to "module":

{
  "name": "challenge-6",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "type": "module", // ADD THIS LINE OF CODE !!!
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2",
    "fs": "^0.0.1-security",
    "mongodb": "^5.1.0"
  }
}

Now add some sample JSON data to the data.json file.

Copy and paste the following code into the data.json:

[
  {
    "name": "Bass Drum",
    "type": "percussion"
  },
  {
    "name": "Violin",
    "type": "string"
  }
]

Step 2: Set Up Express.js and Connect to MongoDB

In the server.js file, import the required packages, create a variable for your MonogoDB URI and your PORT, and initialize an Express app:

// Imports - NOTICE THE DIFFERENCE - These are ESM imports
import { MongoClient } from "mongodb"; // Mongodb package
import express from "express"; // ExpressJS for our server application
import fs from "fs"; // File system

// Setup variables
const uri = "<your-mongodb-connection-string>"; // URI to mongodb server
const PORT = 3000; // PORT for our server to listen to
const app = express(); // Creating our express server

Replace with your actual connection string:

const uri = "<your-mongodb-connection-string>";

Setup your MongoDB establish a connection to your MongoDB:

Create your client variable which you will use as your MongoDB connection
Connect to the client
access the database on the server called music ... If it does not exist MongoDB will automatically create it
Define an initial value for your collection sounds

// MongoDB setup
const client = new MongoClient(uri); // Create client - Think of it as a live connection
await client.connect(); // Connect client to server
const database = client.db("music"); // Access the database on server
let soundsCollection = null; // Initial value of sounds collection

Step 3: Create a Database and Collection

Now, let's create a variable called sounds to check if our database already has a collection named sounds:

// Check if there is a collection with the name "sounds" already in the database
let sounds = await database.listCollections({}, { nameOnly: true }).toArray();
sounds.filter((collectionName) => {
  return collectionName === "sounds";
});

IF the collection does not exist, lets do the following:

Create the required collection, in our case sounds

ELSE:

If the collection already exists, return the existing collection and store its data in the empty variable we created called soundsCollection

NOTE: Do NOT run this code just yet because we will need to update this function in the next step!

// If it doesnt exist, create it and seed with initial data
if (sounds.length == 0) {
  soundsCollection = await database.createCollection("sounds");
} else {
  // Else return existing collection
  soundsCollection = await database.collection("sounds");
}

Step 4: Read JSON Data from the File System and Add frequency Key / Save JSON Data to MongoDB

Now let's update our function to do the following:

(IF) the collection does not exist the final IF ELSE statement will:

Create the required collection, in our case sounds
Get the data from the data.json file
Loop through the data and manipulate it by adding a key to each object called frequency with a value of High frequency
Insert the data directly into the collection

(ELSE):

If the collection already exists, return the existing collection and store its data in the empty variable we created called soundsCollection

// If it doesnt exist, create it and seed with initial data
if (sounds.length == 0) {
  soundsCollection = await database.createCollection("sounds");

  // Get the data from the data.json file
  const filePath = "./data.json";
  const fileContent = fs.readFileSync(filePath, "utf-8");
  const jsonData = JSON.parse(fileContent);

  // Loop through data and add frequency key
  jsonData.forEach((item) => {
    item.frequency = "High frequency";
  });

  // Insert the data directly into the collection
  await soundsCollection.insertMany(jsonData);
} else {
  // Else return existing collection
  soundsCollection = await database.collection("sounds");
}

Step 5: Create a GET Endpoint to Display Data

Create an Express.js GET endpoint that retrieves the data from the MongoDB collection and displays it at the root URL:

// get function to the `/` path = root URL
app.get("/", async (req, res) => {
  // try to get data from soundsCollection and return data 
  // catch error, console.log error and return status code with message
  try {
    const data = await soundsCollection.find().toArray();
    res.json(data);
  } catch (error) {
    console.error("Failed to retrieve documents:", error);
    res.status(500).send("Error retrieving data from the database");
  }
});

Step 6: Putting It All Together

To the bottom of your server.js, using express, set up your server connection with your PORT.

Also add a process that will close the connection to your MongoDB database anytime you kill your server.

// Startup and Cleanup

// Start server
app.listen(PORT, async () => {
  console.log(`Server Started on port ${PORT}`);
});

// Detect when server closes and disconnect from MongoDB server
process.on("SIGTERM", () => {
  app.close(() => {
    client.close();
  });
});

Great!!! Now you are ready to run your code!

Summary

With the completed code in your server.js file, your application should now be able to connect to MongoDB, create a database and collection, read JSON data from a file, add a frequency key with a value of High frequency to each object, save the modified JSON data to the database, and display the data at the root URL using Express.js.

To run the server, simply execute the following command in your terminal:

node server.js

Now, navigate to http://localhost:3000/ in your browser to see the data from the sounds collection in the music database.