DEV Community: Michael Tanaka

Deepening Our Grasp on React: State, Context, and Effects

Michael Tanaka — Mon, 09 Oct 2023 02:05:21 +0000

Introduction

I recently had to relearn how to use React for my final project at Flatiron School. It was a bit difficult at first but once I got into it, it was smooth sailing. Felt like I should make this blog post because in case I need to revisit React after a while, I can always remember the basics.

React

React is a powerful library for building dynamic web applications. But like any tool, its true strength is unlocked when you understand its core features deeply. Today, let's dive deeper into three of React's fundamental concepts: state, context, and effects.

Understanding State in React

State is the heartbeat of a React application. It is the mechanism by which we store and manage dynamic data within our components. Let's unpack this.

A. What is State?

At its core, state is data that changes over time and affects your component's output.

B. Using the useState Hook

Introduced in React 16.8, the useState hook provides a way to use state in functional components:

const [count, setCount] = useState(0);

Here:

count is the current state value.
setCount is the function dedicated to updating this state.

C. Key Insights on State

Immutability: Direct modification of the state is a strict no-go. Always leverage the designated state updating function, like setCount.

// This is wrong
count = count + 1;

// This is correct
setCount(prevCount => prevCount + 1);

Asynchronous Nature: State updates can be asynchronous. When the new state depends on the previous one, always use a functional approach:

setCount(prevCount => prevCount + 1);

Embracing the Power of Context

The React context API is designed to share data that can be considered “global” for a tree of React components.

A. What is Context?

Since I haven't worked with React in a while, I had a problem that consisted of "prop drilling". Prop drilling is where you pass data from a parent to its child component and then to the child's child, and so forth. Context offers a way out.

B. Context Implementation

Here's a basic example illustrating how to implement context:

import React, { createContext, useState } from "react";

export const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [errors, setErrors] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [content, setContent] = useState([]);
  const value = {
    user,
    setUser,
    errors,
    setErrors,
    isLoading,
    setIsLoading,
    content,
    setContent,
  };

  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
};

This was taken from my last project. After doing some research on the topic, the way I used it might not have been the best. I should have created different contexts for different actions. However, since it was a relatively small application, this approach sufficed. Essentially, any of the values passed into the UserContext.Provider as props become available to whatever component you wrap the UserContext.Provider around. AVOID PROP DRILLING AT ALL COSTS. It's a pain to work backwards to undo it all. Believe me!

C. Points to Remember

Use Sparingly: Context is best suited for data like user authentication status or application themes — data that's pervasive.
Performance Implications: Changing context can cause components consuming it to re-render. Avoid excessive changes to maintain good performance.

Managing Side Effects with useEffect

React components can perform actions known as "side effects", which can affect components in ways beyond just rendering.

A. What is a Side Effect?

In the context of React, a side effect might be a network request, manual DOM manipulation, or attaching event listeners — essentially anything that interacts with the world outside of the component.

B. Illustrating useEffect

React gives us the useEffect hook to handle side effects in functional components:

useEffect(() => {
document.title = `Clicked ${count} times`;

return () => {
    console.log('Executing cleanup procedures');
};
}, [count]);

C. Considerations

Dependencies: List dependencies in the array to ensure the effect triggers correctly. If the effect only needs to run once, use an empty dependency array: [].
useLayoutEffect: While useEffect actions occur post-render,useLayoutEffect is available for actions before the screen updates. However, use it judiciously.

In Summary

React's component-based architecture and powerful hooks system provide developers with an unparalleled ability to build dynamic applications. Looking back at it, I wish I wrote this post before I worked on my project, as I probably wouldn't have had such a difficult time getting back into the swing of things, but better late than never!

Understanding Python Decorators: A Practical Introduction

Michael Tanaka — Mon, 28 Aug 2023 05:23:35 +0000

What Are Decorators?

In Python, functions are first-class citizens. This means they can be passed around as arguments to other functions, returned as values from other functions, and even assigned to variables. Decorators leverage this feature to extend or modify the behavior of target functions.

Basic Syntax

The basic syntax for decorators involves the "@" symbol, followed by the name of the decorator function. This is placed just above the function intended to be decorated. Think of decorator syntax as syntactic sugar.

@decorator_function
def target_function():
    print("Target function executed.")

How Does It Work?

When you use a decorator, you are essentially doing three things:

Passing the target function as an argument to the decorator function.
Modifying or extending the behavior of the target function within the decorator function.
Returning the modified function or even a completely new function from the decorator function.

def decorator_function(target_function):
    def wrapper_function():
        print("Before the target function.")
        target_function()
        print("After the target function.")
    return wrapper_function

@decorator_function
def say_hello():
    print("Hello!")

say_hello()

When you call say_hello(), it actually executes wrapper_function(). This, in turn, calls the original say_hello() function between two print statements. The output would be:

Before the target function.
Hello!
After the target function.

Chaining Decorators

Decorators can be chained, meaning you can apply multiple decorators to a single function:

def decorator_one(func):
    def wrapper_one():
        print("Decorator one: Before calling the function.")
        func()
        print("Decorator one: After calling the function.")
    return wrapper_one

def decorator_two(func):
    def wrapper_two():
        print("Decorator two: Before calling the function.")
        func()
        print("Decorator two: After calling the function.")
    return wrapper_two

@decorator_one
@decorator_two
def my_function():
    print("The original function.")

my_function()

Here, my_function is first passed to decorator_two, and then the result is passed on to decorator_one. The output for this code would be:

Decorator one: Before calling the function.
Decorator two: Before calling the function.
The original function.
Decorator two: After calling the function.
Decorator one: After calling the function.

Class Decorators

During my time at Flatiron School, I came across a few useful class decorators:

@staticmethod

A static method is bound to the class itself and not to an instance of the class.
These methods serve as utility functions that operate on their parameters.

Example:

class MyClass:
    def __init__(self,name):
        self.name = self.capitalize_name(name)

    @staticmethod
    def capitalize_name(name):
        return name.capitalize()

instance1 = MyClass('john')
print(instance1.name)

The output would be:

John

@classmethod

Similar to a static method, a class method is bound to the class and not an instance of the class.
The first parameter for a class method is cls, which stands for 'class'.
Class methods can access or modify the class state.

Example:

class MyClass:
    def __init__(self,name):
        self.name = name

    @classmethod 
    def create_with_capitalized_name(cls,name):
        name = name.capitalize()
        return cls(name)

instance1 = MyClass.create_with_capitalized_name('john')
print(instance1.name)

The output would be:

'John'

There's a whole world of decorators out there, but these are the key ones that I've encountered on my Python learning journey at Flatiron School. I genuinely hope you've found this article to be a helpful guide. I'm always open to feedback, so feel free to share your thoughts. Thanks so much for taking the time to read!

Unlocking JavaScript Magic: A Beginner's Guide to Closures

Michael Tanaka — Mon, 03 Jul 2023 01:42:38 +0000

Closures in JavaScript are one of those concepts that can seem a bit elusive when you're just starting out. Yet, once understood, they unlock a whole new level of possibilities and make JavaScript a truly powerful and dynamic language. So, let's dive into the magical world of closures and demystify them!

What is a Closure?

At its simplest, a closure is a function bundled together with references to its surrounding state, the so-called lexical environment. Put in other words, a closure gives you access to an outer function’s scope from an inner function. The term "closure" refers to the act of closing the function and its environment, encapsulating everything needed to execute the function later on.

An Example of a Closure

Let's look at a simple example:

In the example above, if you click on the JS tab, innerFunction has access to outerVariable even after outerFunction has finished execution, thanks to closures.

Why are Closures Important?

Closures are everywhere in JavaScript. Every time we create a function inside a function, we are potentially creating a closure. Here's why they are important:

Data Privacy: Closures allow variables to be kept private, creating a scope that’s inaccessible from the outside world.
Function Factories: We can create multiple functions using closures and not only encapsulate data but also behavior.
Asynchronous JavaScript: Closures are widely used in JavaScript for asynchronous tasks, callback functions, and event handlers where we need to maintain the state.

Things to Remember About Closures

As powerful as closures are, it's important to remember a few key points:

Closures have access to variables from three separate scopes: their own scope, the outer function's scope, and the global scope.
Closures cannot access the arguments of outer functions.
Be aware of the memory implications. Since closures capture and hold onto their outer scope, they can consume more memory than other functions.

Wrapping Up

Closures may seem complicated, but once you understand the basic principle of how functions in JavaScript remember their lexical scope, you've grasped closures. They are one of the many ways JavaScript allows for flexible, powerful programming patterns.

Introduction to The Box Model in CSS: A Crucial Concept for Beginners by a Beginner

Michael Tanaka — Sun, 14 May 2023 22:08:10 +0000

Introduction

I'm a student at Flatiron School, and part of our coursework involves writing blog posts on topics we're keen to learn. Being in the early stages of my development journey, I've found CSS (Cascading Style Sheets) somewhat intimidating. Therefore, I've decided to delve into one of the fundamental concepts in CSS - the Box Model - and share my findings. As a fellow beginner, I'll be learning and explaining as I go, so please feel free to correct me if you spot any inaccuracies!

What is CSS?

Before we dive into the Box Model, it's essential to understand what CSS is. CSS is a stylesheet language used to control the visual presentation of HTML (HyperText Markup Language) elements in a browser. It's a powerful tool in the web developer's toolkit, enabling us to create visually appealing websites that meet specific design requirements.

Understanding the Box Model

The Box Model is a fundamental concept in CSS. It's a theoretical construct that views each HTML element as a rectangular box, composed of four components: content, padding, border, and margin. We can manipulate each of these components individually, giving us granular control over the layout and appearance of our web pages.

Content

The content area is where your actual content resides. This could be text, images, or even other HTML elements. You can manipulate its size using width and height properties. In my example below I've set the width and height of the content area to 200 pixels each. The padding is 20px , the border is 5 pixels, and the margin is 20 pixels. You can now see how these properties affect the content area by changing their values.

Padding

Padding is the space between the content and the border. By adjusting the padding, we can control how much space exists between the content and the border, effectively pushing the content away from the border. As my example shows, by modifying the padding on any side of the box, the text was pushed by the property values amount of pixels away from the border box based on the property chosen.

Border

The border surrounds the content and padding. It's the visible line that we see encapsulating the content and any padding. As my example shows, each border was colored a different color to showcase how you can target any side of the border box.

Margin

The margin is the outermost layer, surrounding the border. The margin doesn't have a visible outline like the border. Instead, it represents the space between different elements, allowing us to control how far apart different elements are from each other. In the example below, the border box of each list item is pushed away from the edges of the page based on the values I've assigned to their margin-bottom, margin-left, etc. properties. The transparent space between the page edge and the border box is the margin. By changing these margin values, we can control how far each element is from the edge of the page or from other elements.

Wrapping Up

In this post, I've attempted to unpack the basics of the CSS Box Model, a key concept in web design. While we've only scratched the surface, understanding these foundational elements - content, padding, border, and margin - is a significant step towards mastering CSS. However, like any other skill, proficiency comes with practice. Happy coding!

Resources

Margin
Border
Padding