
Modern web development offers a plethora of frameworks, libraries, and products, each catering to different project needs. However, the choice between these tools varies significantly depending on whether you're working solo or as part of a large team. Let's delve into how the selection process differs and why it's crucial to align your choices with your project's scale and priorities.

**Solo Projects: Prioritizing Speed and Simplicity**

When working on solo projects, speed is often paramount. Since the success of these endeavors is uncertain, rapid iteration and quick development cycles are key. Unfortunately, many developers overlook this and opt for heavyweight frameworks like Next.js and complex AWS configurations, inadvertently slowing down their progress.

For solo endeavors, simplicity reigns supreme. Vanilla HTML or lightweight solutions like Astro offer swift development experiences without sacrificing functionality. Pairing these with easily manageable databases like SQLite streamlines the entire development process. Moreover, hosting everything on a single VM, such as an EC2 instance or a budget-friendly Digital Ocean server, further expedites deployment.

**Large Team Projects: Balancing Scalability and Collaboration**

In contrast, large team projects necessitate a different approach. While speed remains important, scalability and collaboration take precedence. Frameworks like Next.js, React, Vue, and Angular offer robust ecosystems and extensive community support, facilitating collaboration and ensuring maintainability over the long haul.

Despite the allure of scalability, it's essential to temper expectations. The reality is that many projects, even those undertaken by large teams, may not achieve widespread success. Thus, expending excessive effort on scalability might be unwarranted. Instead, focusing on rapid development and iteration, possibly with more lightweight solutions, can better align with the project's uncertain trajectory.

**Personal Experience: Learning from Past Projects**

Reflecting on past experiences with Next.js for personal projects, it's evident that prioritizing scalability over development speed can backfire. Projects that took too long to build often resulted in minimal user engagement, highlighting the importance of swift iteration and adaptability, especially in solo endeavors.

In conclusion, whether you're embarking on a solo project or collaborating with a large team, the choice of web frameworks and tools should be carefully considered. Prioritize speed and simplicity for solo endeavors, opting for lightweight solutions like Vanilla HTML and Astro, while balancing scalability and collaboration for larger team projects with frameworks like React, Vue, or Angular. By aligning your choices with your project's scale and priorities, you can optimize your development workflow and increase the chances of success.

Choosing Technology for Solo and Team Projects


Was not really sure what I wanted to write about, so I thought I would just write about a few of my thoughts I had this week.

**Heroku's free tier**
I just switched the front end for my Vue app [myCodingStats](https://my-coding-stats-com-client.vercel.app/) to Vercel. It was originally hosted on Heroku. On the free tier of Heroku, if a site does not get any requests for 30 minutes, it will sleep. this results in a five second spin up time when someone goes to the site. It is definitely not ideal for the frontend of your site. I am keeping the api hosted on Heroku though. It seems fine if there is a bit of a delay when you first login, as long as you are able to get to the frontend quickly. If I was to remake the whole site, I would likely use Vercel's Edge and serverless functions for my api.

**Next.js build time**
I worked on my main three projects this week, one written in React, one in Vue, and another in Next. I always serve them locally using whatever command I have in package.json for 'dev'. After switching back and forth between them, I was amazed by how fast Next ran. It would take a few seconds, as opposed to a few minutes. I know that the recent version of the Next compiler was written in Rust, so I am guessing that is why it is so fast. If I was starting a new project, I would likely choose Next, for this reason and others.

I did a quick comparison of the three projects. Here was the time it took to build the project after serving them locally in 'dev' mode:

- Vue: 01:36
- React: 01:45
- Next: 00:02


What I did this Week: 5/15/22


**What is an arrow function in JavaScript?**
Arrow functions are an alternative way of writing functions in JavaScript. There are a few limitations compared to the traditional function that will be discussed in this article.

```js
// Traditional function declaration
function myFunc(myParam) {
  return myParam + 1;
}

// Arrow function declaration
const myFunc = (myParam) => {
  return myParam + 1;
};
```

Arrow functions can often be shortened substantially.

```js
// If there is one parameter, then you do not need to include
// the parenthesis.
const myFunc = (myParam) => {
  return myParam + 1;
};

// If the functions contents can fit on one line, then you can
// remove the 'return' keyword and '{}'.
// In this case, the 'return' is implied.
const myFunc = (myParam) => myParam + 1;
```

It is common to use arrow functions with the built in array methods.

```js
const arr = [1, 2, 3, 4, 5];

const arrMap = arr.map((v) => v + 1);

const arrFiltered = arr.filter((v) => v > 3);

arr.forEach((v) => console.log(v));
```

**The limitations of Arrow functions.**

Arrow functions do not have their own binding of `this`. As a result, you generally will not want to use them as `methods` in your objects. A few more things to know:

- They don't have their own binding to `arguments`, or `super`
- They cannot be used as `constructors` within classes.
- They likely will not behave as expected with the keywords `call`, `apply` and `bind`.

Since the arrow function does not have its own binding of `this`, it cannot reference other attributes or methods in objects. `this` in an arrow function will always reference the global scope.

```js
const obj = {
  value: 1,
  myFunc1: function () {
    console.log(this.value, this);
  },
  myFunc2: () => {
    console.log(this.value, this);
  },
};

obj.myFunc1(); // 1, obj{...}
obj.myFunc2(); // undefined, Window{...} or the Global object
```

For more info, reference the MDN documentation: [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)


JavaScript Arrow Functions


**What is website accessibility?**
Some users on your sites will use screen readers, only use a keyboard to navigate, use screen magnification, use speech input software, or use an older version of their browser. In CSS there are a number of ways you can make your sites accessible to these users.

- Focus styles
- Use `rem` for font sizing
- Browser prefixes

**Focus Styles**
Users who use only a keyboard to navigate will often use the Tab key to traverse websites. When Tab targeting different elements, the `focus` pseudo class is used to show which element is currently selected.

When I first started web development I would disable the focus outline because I thought it looked ugly, not knowing what it was really for. This is definitely a bad practice. A good alternative to disabling it, is the set your own focus behavior. This way elements that are focused will still be accessible to Tab users, and the focus outline or border will fit the color pallet of your site.

```css
*:focus {
  outline: none;
  border: 2px dotted blue;
}
```

**Use rem for Font Sizing**
The `rem` value will always be equal to the root elements `font-size`. If the default font size is 16px, then `1rem = 16px`. If the default font size is not explicitly set, then 1rem will be equal to the browser default font size.

If a user adjusts the font-size of their browser, then font-size set with rem will scale appropriately. Font sizes set with px will not be adjusted, which is bad for accessibility.

```css
.my-class {
  font-size: 1.5rem; 
  /*default font-size = 16px, so 1.5rem = 24px*/
}
```

**Browser Prefixes**
Not all CSS properties are available for all browsers. For example, the property `text-align-last` is not supported in any version of Safari. A good site for checking the availability of CSS properties on browsers is [https://caniuse.com/](https://caniuse.com/). 

You can use browser prefixes in your CSS to make these newer CSS features compatible with older browsers. Here are the four most common ones:

- `-moz-` for Firefox
- `-webkit-` for Android, Safari and Chrome
- `-o-` for Opera
- `-ms-` for Internet Explorer

```css
.my-class {
  -moz-text-align-last: right;
  -webkit-text-align-last: right;
  -o-text-align-last: right;
  -ms-text-align-last: right;
  text-align-last: right;
}
```
You can also use an [autoprefixer](https://www.npmjs.com/package/autoprefixer) package to make this process easier.

This article covered a few of the main ways to make your site more accessible with CSS, but this article only scratches the surface. A resource I recommend is the Web Content Accessibility Guidelines (WCAG) [https://www.w3.org/TR/WCAG22/](https://www.w3.org/TR/WCAG22/)

Website Accessibility with CSS



I recently had a technical front end interview. I did not do as well on the CSS portion of the interview as I had hoped. As a result, I have been practicing my CSS skills over the last week. I found a site called [https://www.frontendmentor.io/](https://www.frontendmentor.io/) that has been a great practice tool.

If you are just getting started with frontend web developer, or are practicing for an interview, then I highly recommend this site.

I have been going through the newbie and junior challenges. I am able to get this done in an hour or two, similar to the length of an interview.

There are often different ways to do the same thing in CSS, so I found that re-doing the challenges in different ways is a good way to learn. For example, do a challenge with display flex, then re-do it with display grid.


Good way to Practice HTML and CSS for a Technical Interview

**What is website accessibility?**
Some users on your sites will use screen readers, only use a keyboard to navigate, use screen magnification or use speech input software. In HTML there are a number of ways you can make your sites accessible to these users.

- Website language
- Semantic HTML
- Proper HMTL headings
- Image alt attribute
- Aria labels

**Website Language**
In your HTML document you can declare the language used on the web page. This will be used by browsers and search engines. You can specify the language of the HTML document, and the language of individual elements.

```html
<!DOCTYPE html>
<html lang="en">
  <body>
    <p lang="fr">Ce paragraphe est défini en français.</p>
  </body>
</html>
```

**Semantic HTML**
Semantic HTML is the use of HTML tags to convey the meaning of the information on the page rather than simply presenting it. A few tags that demonstrate this are `<h1>`, `<button>`, `<article>`, `<footer>` and `<header>` to name a few. This is important for screen readers, or users who only use a keyboard to navigate the site.

```html

<div>
  <div>Header</div>
  <div>Click Here</div>
  <span>Article information</span>
</div>


<section>
  <h1>Header</h1>
  <button>Click Here</button>
  <article>Article information</article>
</section>
```

**Proper HTML headers**
Screen readers use header tags to navigate the site. These header tags are `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>` and `<h6>`. These header tags are used to show the relationships between different sections.

**Image alt attribute**
The `alt` text is displayed if the image cannot be displayed. The text should describe the image if the image contacts information. You can leave the `alt` text blank if the image is for decoration and does not contain information. If the image is used for a link, then the alt text should explain where the link goes.

```html
<img src="profilePic.png" alt="User profile image" />
<a href="https://twitter.com">
  <img src="twitterIcon.png" alt="Link to Twitter" />
</a>
<img src="background.png" alt="" />
```

**Aria labels**
The `aria-label` attribute is used to provide meaning to HTML elements where that meaning is missing. For example, usually a button will have meaning based on the text in-between the button tags, but in some cases this is not done. The `aria-label` is intended for interactive elements only.

```html
<button aria-label="Close">
  <svg></svg>
</button>
```

Here is some more info about accessibility in HTML: [https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)

Website Accessibility with HTML


**What is a Linked List?**
A linked list data structure involves a series of Nodes linked together. Each Node will have a data value and a reference to the next Node in the list. In the last Node, the reference will be set to `null`. Linked lists are not commonly used in front end web development, but they are still very popular for interview coding problems.

**Implementation of a Linked List with a few helper methods**

```js
class Node {
  constructor(data, next = null) {
    this.data = data;
    this.next = next;
  }
}

class LinkedList {
  constructor() {
    this.head = null;
  }

  // Inserts a Node into the Linked List
  insertFirst(data) {
    this.head = new Node(data, this.head);
  }

  // Returns the number of nodes
  size() {
    let node = this.head;
    let count = 0;

    while (node) {
      count++;
      node = node.next;
    }

    return count;
  }

  // Returns the first Node
  getFirst() {
    return this.head;
  }

  // Returns the last Node
  getLast() {
    if (!this.head.next) {
      return null;
    }
    let node = this.head;
    while (node) {
      if (!node.next) {
        return node;
      }
      node = node.next;
    }
  }

  // Removes all Nodes from the Linked List
  clear() {
    this.head = null;
  }

  // Removes the first Node from the Linked List
  removeFirst() {
    if (this.head) {
      this.head = this.head.next;
    }
  }
}
```

Here it is in use:

```js
let list = new LinkedList();
list.insertFirst(1);
list.insertFirst(2);
list.insertFirst(3);
// list = {
//   head: {
//     data: 3,
//     next: {
//       data: 2,
//       next: {
//         data: 1,
//         next: null
//       }
//     }
//   }
// }

list.getFirst(); // { data: 3, next:... }
list.getLast(); // { data: 1, next: null }
list.size(); // 3
list.removeFirst(); // { head: { data: 2, next:... }}
list.clear(); // { head: null }
```

You will notice that a Linked List in JavaScript is simply a series of nested objects. The list will always start with a head, and the last node reference will be `null`.

**If you are preparing for coding interviews, here are a few coding challenges involving Linked Lists**

- [Linked List Cycle](https://leetcode.com/problems/linked-list-cycle/)
- [Middle of the Linked List](https://leetcode.com/problems/middle-of-the-linked-list/)
- [Palindrome Linked List](https://leetcode.com/problems/palindrome-linked-list/)
- [Remove Linked List Elements](https://leetcode.com/problems/remove-linked-list-elements/)
- [Reverse Linked List](https://leetcode.com/problems/reverse-linked-list/)


Linked List in JavaScript


**What do the key words `var`, `let` and `const` do?**
These key words are used to declare variables in JavaScript.

```js
var firstName = 'Bob';
let lastName = 'Bobson';
const age = 20;
```

Both `let` and `var` can have their values changed after declaration and can be initialized without a value. Variables declared with `const` cannot change, and a value must be assigned when the variable is declared.

```js
var firstName = 'Bob';
let lastName = 'Bobson';
const age = 20;

firstName = 'John'; // Runs without issue
lastName = 'Smith'; // Runs without issue
age = 80; // Causes TypeError: Assignment to constant variable.
```

```js
// Variables declared without assigning a value

let firstName; //Runs without issue
var lastName; // Runs without issue
const age; // Causes SyntaxError: Missing initializer in const declaration
```

A few things to note about `const`

- If the variable is an Object, the object attribute values can be changed and additional attributes can also be added. The variable cannot be reassigned.
- If the variable is an Array, the values in the array can change, but the variable cannot be reassigned.
- You will sometimes see `const` variables written in all caps `const PORT = 8080`. This is a stylistic choice.

```js
// Objects
const obj = {
  firstName: 'Bob',
};

obj.firstName = 'John'; // Runs without issue
obj.lastName = 'Bobson'; // Runs without issue
delete obj.firstName; // Runs without issue
obj = {}; // Causes TypeError: Assignment to constant variable.

// Arrays
const arr = [1, 2, 3];
arr.push(4); // Runs without issue
arr = []; // Causes TypeError: Assignment to constant variable.
```

**Understanding scope**
There are three types of scope in JavaScript. The scope of a variable determines which other parts of the program can access it.

- Function Scope
- Block Scope
- Global Scope

**Function Scope**
Variables declared within a function will have functional scope. Whether you declare a variable as either `var`, `let` or `const`, it will only be accessible within the function it was declared in.

```js
// Function Scope
function doSomething() {
  var firstName = 'Bob';
  let lastName = 'Bobson';
  const age = 20;
}
doSomething();

console.log(firstName);
console.log(lastName);
console.log(age);

// The three variables are not accessible outside of
// the function so they cause a ReferenceError
```

**Block Scope**
You can create block scope by wrapping your code in `{}`. Both `let` and `const` are not accessible outside of the block they were defined in. On the other hand, `var` is accessible outside of the block it is defined in.

```js
// Block Scope
{
  var firstName = 'Bob';
  let lastName = 'Bobson';
  const age = 20;
}

console.log(firstName); // Will run
console.log(lastName); // Causes ReferenceError: lastName is not defined
console.log(age); // Causes ReferenceError: age is not defined
```

Block Scoping can also be seen in `for-loops`.

```js
for (var x = 0; x < 10; x++) {
  console.log(x);
}

console.log(x);
// Runs without issues
```

```js
for (let x = 0; x < 10; x++) {
  console.log(x);
}

console.log(x);
// Causes ReferenceError: x is not defined
```

**Global Scope**
These are variables declared outside of the functional scope and block scope. They can be accessed globally in the JavaScript program. It is advisable to declare a limited number of variables like this. Having many global variables in a JavaScript program can often lead to unforeseen bugs as the program becomes more complex.

```js
var firstName = 'Bob';
let lastName = 'Bobson';
const age = 20;

// Function Scope
function doSomething() {
  console.log(firstName);
  console.log(lastName);
  console.log(age);
}
doSomething();

// Block Scope
{
  console.log(firstName);
  console.log(lastName);
  console.log(age);
}

// Prints the variables without any errors
```

**Key Takeaways**

- Do not use `var`, use `let` and `const` instead. Since `var` is not block scoping, it can lead to unforeseen bugs in your program.
- Use `const` when you know the value will not change. Use `let` when the value will change

More info can be found on the MDN docs:

- [var](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var)
- [let](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
- [const](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)


JavaScript, var, let and const


**What is the Spread Operator?**
This syntax is used to succinctly pass multiple values from either an Array or Object to an expression where elements are expected. Examples are the best way to show this.

**Arrays**

Combining arrays

```js
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combinedArr = [...arr1, ...arr2];
//  combinedArr = [1, 2, 3, 4, 5, 6]
```

```js
let arr1 = [1, 2, 3];
let arr2 = [4, ...arr1, 5, 6];
//  arr2 = [4, 1, 2, 3, 5, 6]
```

Copying an array

```js
let arr = [1, 2, 3];
let arrCopy = [...arr];
//  arrCoppy = [1, 2, 3]
//  changing arr will not effect arrCopy
```

**Objects**
Merge Objects

```js
let obj1 = { id: 1, name: 'Aden' };
let obj2 = { birthday: '2022-02-04', hairColor: 'Brown' };
let combinedObj = { ...obj1, ...obj2 };
//  combinedObj = { id: 1, name: 'Aden', birthday: '2022-02-04', hairColor: 'Brown' }
```

Note: Merging objects with like attributes may not behave the way you expect

```js
let obj1 = { id: 1, name: 'Aden' };
let obj2 = { id: 2, name: 'Bob' };
let combinedObj = { ...obj1, ...obj2 };
//  combinedObj = { id: 2, name: 'Bob' }
```

**A Common use case in React**

```js
import { useState } from 'react';

const App = () => {
  const [input, setInput] = useState('');
  const [list, setList] = useState([]);

  const addButtonClick = () => {
    // We use the spread operator to add
    // an item to the end of the array
    setList((list) => [...list, input]);
  };

  return (
    <div>
      <input
        type='text'
        value={input}
        onChange={(e) => {
          setInput(e.target.value);
        }}
      />
      <button onClick={addButtonClick}>Add</button>
      <ul>
        {list.map((item) => {
          return <li key={Math.random()}>{item}</li>;
        })}
      </ul>
    </div>
  );
};

export default App;
```

More information about the spread syntax can be found in the MDN docs: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)


Javascript Spread Operator (...)


**What is Apache Arrow?**
Apache Arrow is a series of libraries that enable large data systems to process and transfer data quickly and efficiently. It is used by AWS Data Wrangler, the python library Pandas, MATLAB and many other technologies. The primary component of Apache Arrow is the in-memory columnar format specification used to represent table-like datasets in-memory.

**The Arrow Columnar format**
There are two advantages to this format for data processing. Firstly, processing data through this format is very fast. The image below gives a good representation of how data is stored in memory. Secondly, this format is language agnostic. Meaning that transferring data between different programming languages or between different databases is simple. Generally, for processing large amounts of data, a data processing engineer would create custom data structures to represent data sets in memory and would develop serialization interfaces to convert the data structures to different file formats or other data transport interfaces. This resulted in a large amount of wasted time within the development process.

**When would I use Apache Arrow?**
Apache Arrow is a good choice if you are processing large amounts of structured data, or if you are handling large, structured data transfer between many different connected technologies. For example, a Java application can call a C or C++ algorithm on data that originated in the JVM.

**An example in Python**
This shows how to read a csv file and process it into the Arrow Columnar format. (For large data sets it will likely be more efficient to use a different file format like Apache Parquet)

```py
# 1. Take some csv data and convert it to a table or array format
import pyarrow as pa
import pyarrow.csv as pacsv

# Get the csv in the same file directory
fn = 'apacheArrowExample0.csv'

# Read the csv file
table = pacsv.read_csv(fn)

# Create the schema for our csv file as a pyarrow Table
pa.Table
id: pa.int32()
firstname: pa.string()
lastname: pa.string()
dateofbirth: pa.date32()

# See that our csv data is formatted as a Apache Arrow Columnar data format
print(table)

"""
pyarrow.Table
id: int64
firstname: string
lastname: string
dateofbirth: date32[day]
----
id: [[1,2,3,4,5,6,7,8,9,10,...]]
firstname: [["Coral","Lucille","Marcy","Christian","Margarette","Vanessa","Christal","Anallese","Aaren","Christian",...]]
lastname: [["Killigrew","Chick","Read","Marden","Chapland","Nedrud","Mott","Johanna","Norrie","Bahr",...]]
dateofbirth: [[1917-01-15,1900-09-15,2018-03-27,1975-09-24,1929-10-31,1987-12-10,1995-12-26,1981-05-28,1914-07-04,1933-04-08,...]]

"""
```

More information about Apache Arrow can be found at [https://arrow.apache.org/](https://arrow.apache.org/)


Intro to Apache Arrow


**What are React hooks?**
They are functions in React that allow you to add react functionality to function based components.

**What is the useRef hook?**
This hook is used to track values between renders and access DOM elements. The main difference between a ref and state is that updating a ref will not cause a re-render. This is especially useful if you want to track the number of renders of a component or when you want to track the previous state of a component. The syntax follows a common pattern:

```js
const refContainer = useRef(0);
//refContainer: {current: 0}
```

- In this case, `0` is the initial value of refContainer.
- refContainer will always be formatted as `{current: someValue}`

Example using useRef to access a DOM node:

```jsx
import { useRef } from 'react';

const App = () => {
  let element = useRef();

  const focusButtonClick = () => {
    element.current.focus();
  };

  return (
    <>
      <input ref={element} type='text' />
      <button onClick={focusButtonClick}>Focus</button>
    </>
  );
};

export default App;
```

- All React elements have a `ref` attribute that useRef can access.
- Element is set as `{current: <input type="text" />}`
- When the button is clicked, the input is focused.

Example using useRef to track previous state:

```jsx
import { useRef, useState, useEffect } from 'react';

const App = () => {
  const [input, setInput] = useState('');
  const previousState = useRef('');

  useEffect(() => {
    //previousState.current will always update to the previous state
    previousState.current = input;
  }, [input]);

  return (
    <>
      <input type='text' value={input} onChange={(e) => setInput(e.target.value)} />
      <p>Current State: {input}</p>
      <p>Previous State: {previousState.current}</p>
    </>
  );
};

export default App;
```

More information about useRef can be found in the React docs: [https://reactjs.org/docs/hooks-reference.html#useref](https://reactjs.org/docs/hooks-reference.html#useref)


React Hooks: useRef()


**What are React hooks?**
They are functions in React that allow you to add react functionality to function based components.

**What is the useMemo hook?**
This hook will only run if its dependencies change. This is especially useful in preventing expensive operations from needlessly running.

- For those that are familiar with Vue.js, the useMemo hook function in React serves the same purpose as computed properties in Vue.

The syntax follows a common pattern:

```jsx
const functionToRun = (value) => return value + 1;
const computedValue = useMemo(() => functionToRun(value),[value]);
```

A few things to note:

- `functionToRun()` needs to return a value.
- `[value]` is the dependency. There can be multiple dependencies ex: `[value1, value2, value3]`. Any time the dependencies change, the useMemo function will run.
- If the dependency array is left empty `[]`, useMemo will only execute the function on the initial component render.

Here is a practicle example using the useMemo hook:

```jsx
import { useState, useEffect, useMemo } from 'react';

const App = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      //Fetches a list of ten users
      const response = await fetch('https://jsonplaceholder.typicode.com/users');

      // If the HTTP status code is 200-299
      if (response.ok) {
        const json = await response.json();
        setUsers(json);
      }
    };

    fetchData();
  }, []);

  //Only runs when users changes
  const profiles = useMemo(() => {
    users.map((user) => {
      return <Profile key={user.id} user={user} />;
    });
  }, [users]);

  return <div>{profiles}</div>;
};

const Profile = ({ user }) => {
  return (
    <div>
      <h1>{user.name}</h1>
    </div>
  );
};

export default App;
```

More information about useMemo can be found in the React docs: [https://reactjs.org/docs/hooks-reference.html#usememo](https://reactjs.org/docs/hooks-reference.html#usememo)


React Hooks: useMemo()


**What are React hooks?**
They are functions in React that allow you to add react functionality to function based components.

**What is the useContext hook?**
This hook is used to efficiently pass state down the component chain. Prop drilling has historically been used to do this. Prop drilling is the process of passing state values as props deep down a component chain. Often times, this results in passing props to components that do not need them. The useContext hook allows us to pass state values down the component chain without prop drilling.

The best applications for this hook are to pass global values to children components. A few example use cases are application theme switching, and logged in user information (user id, user name...). This hook is not recommended as a replacement for the state management library Redux. Currently it is not robust enough to handle many of Redux's use cases. This hook can work great for small applications that may only have a few globally used pieces of state.
The syntax follows a common pattern:

```jsx
import { createContext, useContext } from 'react';

//Initialize our context.
//null is the default value if none are later provided.
//Often this is done in a different file.
const UserContext = createContext(null);

const ParentComponent = () => {
  //We wrap our children component in the Provider
  return (
    <UserContext.Provider value={'Aden'}>
      <ChildComponent />
    </UserContext.Provider>
  );
};

const ChildComponent = () => {
  //Access the context passed down from the ParentComponent
  const user = useContext(UserContext);
  return (
    <>
      <h1>Child Component</h1>
      <p>{user}</p>
    </>
  );
};

export default ParentComponent;
```

Here is an example using the useEffect and useState hooks:

```jsx
import { useState, useEffect, createContext, useContext } from 'react';

const UserContext = createContext(null);

const App = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      //Fetches a list of ten users
      const response = await fetch('https://jsonplaceholder.typicode.com/users');

      // If the HTTP status code is 200-299
      if (response.ok) {
        const json = await response.json();
        setUsers(json);
      }
    };

    fetchData();
  }, []);

  return (
    <UserContext.Provider value={users}>
      <ChildComponent1 />
    </UserContext.Provider>
  );
};

const ChildComponent1 = () => {
  //This component does not need the users data
  return (
    <>
      <h1>ChildComponent1</h1>
      <ChildComponent2 />
    </>
  );
};

const ChildComponent2 = () => {
  const users = useContext(UserContext);

  return (
    <div>
      <ul>
        {/*If the data exists, display a list of 
        users names*/}
        {users &&
          users.map((user) => {
            return <li key={user.id}>{user.name}</li>;
          })}
      </ul>
    </div>
  );
};

export default App;
```

More information about useContext can be found in the React docs: [https://reactjs.org/docs/context.html](https://reactjs.org/docs/context.html)


React Hooks: useContext()


**What are React hooks?**
They are functions in React that allow you to add react functionality to function based components.

**What is the useEffect hook?**
This hook is used for managing the lifecycle of a component. It serves the purpose of the componentDidMount, componentDidUpdate, and componentWillUnmount methods used in class based React components. A couple uses are fetching an api when the component mounts or changing the component state when the component is updated. The syntax follows a common pattern:

```js
useEffect(() => {
  console.log('This will run each time the component mounts');
}, []);
```

The `[]` is left empty so that the useEffect hook only runs when the component mounts. The useEffect hook will watch for any changes made to values added to this array. Whenever these values change, the useEffect hook will run. Here is an example:

```js
const [stateValue, setStateValue] = useState('');

useEffect(() => {
  console.log('This will run each time the component mounts, or
  when the stateValue changes.');
},[stateValue]);
```

Here is a practical example that fetches data when the component mounts:

```jsx
import { useState, useEffect } from 'react';

const App = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      //Fetches a list of ten users
      const response = await fetch('https://jsonplaceholder.typicode.com/users');

      // If the HTTP status code is 200-299
      if (response.ok) {
        const json = await response.json();
        setData(json);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <ul>
        {/*If the data exists, display a list of 
        users names*/}
        {data &&
          data.map((user) => {
            return <li key={user.id}>{user.name}</li>;
          })}
      </ul>
    </div>
  );
};

export default App;
```

More information about useEffect can be found in the React docs: [https://reactjs.org/docs/hooks-effect.html](https://reactjs.org/docs/hooks-effect.html)


React Hooks: useEffect()


**What are React Hooks?**
They are functions in React that allow you to add react functionality to function based components.

**What is the useState hook?**
The useState hook is used to add state to a function-based component. The syntax will follow a common pattern:

```js
const [listEntry, setListEntry] = useState('');
```

- `listEntry` is the state variable.
- `setListEntry` is the function used to edit the state variable. Note, you should only edit the state variable through this function.
- `useState('')` is setting the initial value of the state variable. In this case, when `listEntry` is initialized, it equals an empty string.

This example lets you enter a value, then add it to a bulleted list:

```jsx
import { useState } from 'react';

const App = () => {
  const [listEntry, setListEntry] = useState('');
  const [listEntries, setListEntries] = useState([]);

  const handleInputChange = (e) => {
    setListEntry(e.target.value);
  };

  const handleAddButtonClick = () => {
    setListEntries((listEntries) => [...listEntries, listEntry]);
    setListEntry('');
  };

  return (
    <div>
      <input type='text' value={listEntry} onChange={handleInputChange} />
      <button onClick={handleAddButtonClick}>Add</button>
      <ul>
        {listEntries.map((entry) => {
          return <li>{entry}</li>;
        })}
      </ul>
    </div>
  );
};
```

- `const [listEntries, setListEntries] = useState([]);` we are creating a value `listEntries` and initially setting it as an empty array. This will hold our list items.
- `<input type="text" value={listEntry} onChange={handleInputChange} />` each time you enter a character in this input, the `listEntry` variable is being updated to what you are typing.
- `<button onClick={handleAddButtonClick}>Add</button>` when clicked, the value of `listEntry` is being appended to the `listEntries` array.
- `{listEntries.map((entry) => {return <li>{entry}</li>;})}` the values in `listEntries` are being rendered in a bulleted list.

More information can be found in Reacts official documentation: [https://reactjs.org/docs/hooks-state.html](https://reactjs.org/docs/hooks-state.html)


Aden Eilers

Articles