DEV Community: m0nm

Understanding ReactJS re-renders and memoization

m0nm — Tue, 27 Dec 2022 13:51:29 +0000

Performance is a core factor in any successful web apps, Users won't bother to wait over 2 seconds for websites to finish loading, and because of that you -the web developer- should make sure that your websites doesn't exceed that.

In this tutorial, We're going to take a look at ReactJS rendering cycle, how does it work, what trigger a render, how do we optimize it using methods such as: useMemo and useCallback, and when we should (or shouldn't) use them.

What is rendering
The ReactJS rendering cycle
- When initializing the component
- When re-rendering a component
What triggers a re-render?
- The component state has changed
- The component parent is re-rendered
- Context value has changed
- What about props change?
Memoization techniques
- memo
- Composition
- Using component's props
- useMemo
- useCallback
You're trading time with memory!
Further Reading
Conclusion

What is rendering

Simply means that ReactJS draws the shape (UI) of a component based on its states and props. It does that by converting the component code into html elements and inject it into the DOM.

The ReactJS rendering cycle

When it comes to converting a component code into html elements ReactJS split this process into two steps: the render step and the commit step. however this process behavior is slightly different depending on if the components are initialized or re-rendered

When initializing the component

the render step
Here React will traverse the DOM from the root element to all it's descendants, while traversing React will convert JSX into a React Element using the createElement() method
the commit step
here all React Elements are applied to the DOM

When re-rendering a component

React will traverse the DOM in search of elements that are flagged for update. once finished it will proceed to the render step

the render step
Similarly to initializing the component, React will convert JSX into a React Element for each element flagged for update using the createElement() method. Then they'll be compared to the their last render creating a list of all changes that needs to be made in the DOM
the commit step
Finally all elements that are different from themselves in the last render will be applied to the DOM, Otherwise React will discard the operation

sometimes the rendering step can be slow (ex: component is too big), which causes performance hits, therefore if we need to eliminate those performance hits we should remove unnecessary re-renders. Next we'll discuss what triggers a re-render.

What triggers a re-render?

There are 3 main factors that cause a re-render

The component state has changed

You've probably knows this, Changing the state of a component (either using useState or useReducer) will cause a re-render so that the website UI match the component, Here is a basic example

import {useState, useEffect} from "react"

function APP() {
    const [count, setCount] = useState(0)

    useEffect(() => console.log('new render'), [])

    return <button onClick={() => setState(count + 1)}>click me</button>
}

each time you click on the button will fire a console log implying a re-render.

Speaking of state hooks, You may find this interesting:

useState vs useReducer: What are they and when to use them?

m0nm ・ Feb 19 '22

#react #javascript #tutorial #webdev

The component parent is re-rendered

If the parent component triggered a re-render (either by these 4 factors) the component will also re-render, Example


function Parent() {
    const [count, setCount] = useState(0)

    return (
        <div>
            <button onClick={() => setState(count + 1)}>click me</button>

            <Child />
        </div>
    )
}

function Child() {
    useEffect(() => {
        console.log("I'm being re-rendered because of my parent 😠")
    }, [])

    return <h1>I'm a child component</h1>
}

each time you click on the button it will fire a console log with the message I'm being re-rendered because of my parent 😠, implying a re-render of the child component.

Context value has changed

if the component is consuming context provider value then any change in the value will re-render the component

import {useState,createContext, useContext} from "react"

const CountContext = createContext(null)

function App() {
    const [count, setCount] = useState(1);

    const onClick = () => {
        setCount(prev => prev + 1);
    };

    <CountContext.Provider value={count}>
        <Component />
    </CountContext.Provider>
}

function Component() {
    const value = useContext(CountContext)
    console.log("re-render")
    return <h1>count is: {value}</h1>
}

What about props change?

Props are passed from parent to child, In most cases props are a state in the parent component, When props changes that means the parent's state has changed which causes the parent to re-render, which means the child will re-render as well as stated above

Memoization techniques

Now we're going to explore memo, useMemo and useCallback , how they work and how to use them

`memo`

when we have a Parent component and Child component with it's props. We know that when the parent component re-renders then all of it's descendants will re-render as well, Even if their props hasn't changed. The reason is that React compares the old props with the new props which do not reference the same object, therefore React will re-render the child component.

If it happens to be a problem to you, You can use React higher order component memo to memoize the Child component:

// ./Child.jsx
import {memo} from "react"

function Child({name}) {
    console.log("not gonna re-render when my parent do")
    return <h1>My memoized name is: {name}</h1>
}

export default memo(Child)

// ./Parent.jsx
function Parent() {
    const [count, setCount] = useState(1);
    const name = "john"

    return(
        <button onClick={() => setState(count + 1)}>click me</button>
        <Child name={name} />
    )
}

Composition

Another trick you could use without relying on memo is composition, more about it by Kent Dodds


function Child({name}) {
    console.log("not gonna re-render when my parent do")
    return <h1>My memoized name is: {name}</h1>
}

// ./Parent.jsx
function Parent({children}) {
    const [count, setCount] = useState(1);

    return(
        <button onClick={() => setState(count + 1)}>click me</button>
        {children}
    )
}

function App() {
    const name = "john"

    return (
        <Parent>
            <Child name={name} />
        </Parent>
    )
}

Using component's props

You can achieve the same by passing the Child as a prop to Parent

function Child({name}) {
    console.log("not gonna re-render when my parent do")
    return <h1>My memoized name is: {name}</h1>
}

// ./Parent.jsx
function Parent({child}) {
    const [count, setCount] = useState(1);

    return(
        <button onClick={() => setState(count + 1)}>click me</button>
        {child}
    )
}

function App() {
    const name = "john"

    return (
        <Parent child={<Child name={name} />} />
    )
}

`useMemo`

When React re-renders every function within the component will be re-created again, this could cause performance issues if the function is expensive. In order to fix that useMemo allows you to memoize expensive functions so that you can avoid calling them on every render.

You can see below we have expensiveFunction that is slow, by passing it to useMemo we make sure that it's not called again unless we change the bool state, so that when we click on "increment count" button there won't be any lag:

import {useState, useMemo} from "react"
function App() {
    const [count, setCount] = useState(1);
    const [bool, setBool] = useState(false);

    const expensiveFunction = useMemo(() => {
        for(let i = 0; i < 100000000; i++) {}
        // do something
        return bool
    } , [bool])

    return (
        // increment count
        <button onClick={() => setCount(count + 1)}>increment count</button>

        // re render to use expensiveFunction
        <button onClick={() => setBool(!bool)}>re-render</button>
    )
}

`useCallback`

The useCallback and useMemo Hooks are similar. The main difference is that useMemo returns a memoized value and useCallback returns a memoized function.

import {useState, useCallback} from "react"
function App() {
    const [count, setCount] = useState(1);
    const [bool, setBool] = useState(false);

    const expensiveFunction = useCallback(() => {
        for(let i = 0; i < 100000000; i++) {}
        // do something
    } , [bool])

    return (
        // increment count
        <button onClick={() => setCount(count + 1)}>increment count</button>

        // re render to use expensiveFunction
        <button onClick={() => setBool(!bool)}>re-render</button>
    )
}

You're trading time with memory!

Now this doesn't mean to use these memoizing hooks in every piece of code of your app, Know that what you're doing is trading time with memory. Too much memory usage is just going to make it worse.

So when should you use them?

Only when you notice that your app is slow when re-rendering, Otherwise don't touch the code: "If it's not broken don't fix it"

Conclusion

We've reached the end of this post, I hope it was helpful to you, If it was then please consider liking this post. If you have any questions just hit me up in the comment section, I'm not an expert in this subject but I'll try my best.

Nextjs: Oauth and Credentials authentication with NextAuth - Part 2

m0nm — Tue, 28 Jun 2022 10:16:37 +0000

Welcome to the second part of NextJs with NextAuth, In the first part we've seen how to integrate Oauth2 authentication to your application, Here is the first part if you haven't seen it

Nextjs: Oauth and Credentials authentication with NextAuth

m0nm ・ Mar 21 '22

#webdev #react #nextjs #beginners

Today we are going to look at how to implement username and password authentication. Let's get started!

If we take a look at NextAuth big list of providers we have a Credentials provider. The Credentials provider allows you to handle signing in with credentials, such as a username and password, domain, or two factor authentication or hardware device.

Credentials provider is used when you have a backend database setup you wish to authenticate against.

The default drawback is that the authenticated users sessions can not persisted in the database. (because the credentials provider uses the JWT strategy, Only other Oauth providers sessions can be stored through a database adapter)

Let's Get Started

create a nextjs app :
npx create-next-app credentials-auth

install NextAuth:
npm i next-auth

inside pages/_app.js add SessionProvider


import { SessionProvider } from "next-auth/react"

export default function App({ Component, pageProps: { session, ...pageProps }}) { 

    return (
        <SessionProvider session={session}> 
            <Component {...pageProps} />
        </SessionProvider> 
     )
    }

And finally add the api route in pages/api/auth/[...nextauth].js

Setting up Credential Provider

Now we're ready to set up the credentials provider, So inside [nextauth].js Add this:

import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials";

export default NextAuth({ 

    // any secret word like: "i am a stegosaurus"
    secret: process.env.SECRET,

    // enabe JWT
    session: {
        strategy: "jwt",
    },

    providers = [

        CredentialsProvider({ 
        // the button text displayed on the sign in form
            name: "Sign In With Credentials",
        })

    ]

})

Adding the credentials fields

Now specify the input fields that would be displayed on the default sign in form

you can use your custom login page as well

    ...
        credentials: {

            username: { 
                            label: "Username", 
                            type: "text", 
                     placeholder:"Enter Your Username..." 
                   },

            password: { 
                            label: "Password", 
                            type: "password", 
                     placeholder:"Enter Your Password..." 
                   }
        }
    ...

Here's how the form looks like

The authorize function

Now we need to setup the authorize function

The authorize function is where we validate the user input against the database records

Inside the authorize function you add authentication logic to look for the user, compare the passwords...

For example:

    ...
        async authorize(credentials, req) { 

            const res = await fetch('www.server.com', {
                method: "post",

                headers: {
                                "Content-Type": "application/json",
                            },

                body: JSON.stringify({
                        username: req.body.username
                        password: req.body.password
                })

            })
            // and then you may or may not get the user 
            const user = await res.json()

        }
    ...

Now the important part: the data you return from the authorize function:

If you return a user object

Then it means the credentials are valid, The returned object will be persisted to the JSON Web Token and the user will be signed in

If you return null

then an error will be displayed advising the user to check their details.

If you throw an error

the user will be sent to the error page with the error message as a query parameter.

...

async authorize() {

    // if credentials are valid
    if (user) {  
        return user  
    } else {
        return null
    }
}
...

And that's it!

Here is the full code:

import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials";

export default NextAuth({ 

    // any secret word like: "i am a stegosaurus"
    secret: process.env.SECRET,

    // enable JWT
    session: {
        strategy: "jwt",
    },

    providers: [

        CredentialsProvider({ 

            // the button text displayed on the sign in form
            // so this would be: sign in with Credentials
            name: "Credentials",

            // the input fields on the default sign in form
            // you can use your custom login page instead 
            credentials: {

                username: { 
                                label: "Username", 
                                type: "text", 
                         placeholder:"Enter Your Username..." 
                       },

                password: { 
                                label: "Password", 
                                type: "password", 
                         placeholder:"Enter Your Password..." 
                       }
            },

        // The authorize function is where we validate the user input 
        // against the database records
        async authorize(credentials, req) { 

            // Here you add authentication logic: 
            // look for the user, compare the passwords... 
            const res = await fetch('www.server.com', {
                method: "post",

                headers: {
                                "Content-Type": "application/json",
                            },

                body: JSON.stringify({
                        username: req.body.username,
                        password: req.body.password
                })

            })

            // and then you may or may not get the user 
            const user = await res.json()

            // if credentials are valid
            if (user) {  
                    return user  
                } 

            else {
                // if not
                return null;
                }
        }

    })

    ]
})

Conclusion

We've reached the end of this post, Hopefully it was helpful to you. If you liked this post then consider giving me a ❤️, And don't forget to follow me if you want more of my content!

Till next time, Happy coding!

Painless conditional classes with classnames package

m0nm — Sat, 04 Jun 2022 10:39:02 +0000

Hey folks today's post is a small one but i'm going to share with you a pretty neat way to manage your conditional styles.

If you ever worked on conditional classes, chances are you pulled your head trying to put those class names all together with ternary operators and what's not. Today I'll introduce a simple and better way to write conditional classes, Our savior is classnames.

classnames is a simple JavaScript utility for conditionally joining classNames together

First let's see the problem here with a button as an example

const [active, setActive] = useState(false);
<button 
    onClick={() => setActive(true)} 
    className=`btn ${active ? "btn-active" : "btn primary"}`
    >
    Click Me
    </button>

The code above works fine, However we can agree that it looks ugly, If you use CSS modules it may look a bit more readable but it would still look ugly. Especially if you have multiple classes

That's where classnames package comes into play

import classnames from "classnames"

const [active, setActive] = useState(false);

const btnStyles = classnames({
    btn: true, 
    btn-active: active
})

<button 
    onClick={() => setActive(true)} 
    className={btnStyles} >
    Click Me
    </button>

You can see that the syntax is pretty straightforward, classnames will add the 'btn-active' class is active is set to true

Here is the general syntax

const condition = 1 + 1 === 2; 
classnames('foo', {'bar': true, 'baz': condition})

'foo' will always be printed, 'bar' too, but 'baz' will be printed if the expression evaluates to true.

Conclusion

that’s been it! I hope you enjoyed this post, And hopefully you learned something new, If you know any other life-saving tool, share it in the comments!

Thanks for reading, happy conditional styling.

Laravel 9: Overview for newcomers

m0nm — Wed, 01 Jun 2022 16:21:31 +0000

Laravel is the most famous and wide-use framework of PHP.

People say it's easy to use and very enjoyable. However it may feel a bit overwhelming at first, Especially if you're coming from frameworks like Express and Django, "Illuminate" ? "Migrations" ? Oh my!

This article is not a tutorial per se but it aims to give you an introductory of what is all about to familiarize yourself more. I suggest you read the official documentation as well,

Let's get started!

So what is Laravel ?
Setting up Laravel
Overview of Laravel main components
Routing
Controllers
Blade template engine
Working with forms
Working with databases
- Connecting to database
- migrations
- models
- Seeders and factories
Conclusion

So what is Laravel ?

Before proceeding I want to make something clear, When I started out learning Laravel, I thought it's a backend framework, But in reality Laravel is a fullstack (can be integrated with Front-end frameworks), battery-included or an "out of the box" PHP framework.

"Out of the box" means built-in features that needs little to no setup to work with. If we take authentication for example, Other frameworks may have you build the whole system from scratch, Where Laravel already got your back. This is a huge plus towards development experience.

That's why when you install Laravel you'll find a structure of folders (similar to Ruby on Rails) instead of a blank folder.

Setting up Laravel

Prerequisite

PHP 8.0
OOP PHP principles
Basic knowledge of MVC model
composer (optional)

Installing Laravel

There are many options to install Laravel

The simplest one is to use composer so make sure it's installed on your system.

composer create-project laravel/laravel project-name

after installation is complete you can open it like so
cd project-name
php artisan serve // open in localhost:8000

what is artisan ?
artisan is a command line tool included with Laravel, It provides a number of commands that can help you while you build your application easily.

Overview of Laravel main components

Routing

To define a route for your website open web.php from the routes folder

You use to Route class to define a route with a static method (get, post, put, delete)

the static methods accept a URL and a closure (callback function)

use Illuminate\Support\Facades\Route;

Route::get('/', function () {

return 'Hello World';

});

You can use URL parameters as well

use Illuminate\Support\Facades\Route;

Route::get('/books/{book}', function ($book) {

return 'The book is' . $book;

});

Keep in mind that function parameters names don't matter, But their order do!


use Illuminate\Support\Facades\Route;

Route::get('/books/{book}/{comments}', function ($comments, $book) {

return 'Im not the comments iam the book!' . $comments;

});

passing a view

your views can be either html or blade template engine, We'll talk about blade at later time

use Illuminate\Support\Facades\Route;

Route::get('/', function () {

return view('greeting');

});

If you're route only returns a view you can use the view method


Route::view('/', 'greetings');

passing data to view

sometimes you may want to render a dynamic data, You can pass your data as the second argument of view method or using the with helper


use Illuminate\Http\Request;

Route::get('/user', function (Request $request) {

$user = ['name' => 'joe', 'email' => 'joe@email.com'];

return view('user', ['user' => $user]);

// or
return view('user')->with(['user' => $user]);

});

and use it in your view (this is a blade template)


<body>
    <h1>user name is: {{$user->name}}</h1>
    <p>user email is: {{$user->email}}</p>

</body>

However putting all the logic inside the routes file will do no good. It's time to talk about controllers

Controllers

Controllers are the means to organize request handling logic

To put it simply, a controller is just a class that has methods that you define which either can be assigned to handle a specific request

You will find the controllers inside App\Http\Controllers\

To create a controller you use an artisan command for that

So open the terminal and type: php artisan make:controller BookController

The controller is now in: App\Http\Controllers\BookController

Now you're ready to define your methods

public function index()

{
return view('books');
}

Now you're ready to use it inside your route file

instead of writing the callback function you put your controller inside brackets

the second element inside the brackets is your controller's method name

Don't forget to import it first!

use App\Http\Controllers\BookController;

Route::get('/books', [BookController::class, 'index']);

Blade template engine

Blade is a template engine that is included with Laravel.

All Blade templates gets compiled into plain PHP code.

Blade files use the .blade.php file extension and are usually inside resources/views directory.

rendering data
If you've read above about how to pass data to your views you've seen that Blade uses double curly braces to render PHP variables

<h1>user name is: {{$user->name}}</h1>
<p>user email is: {{$user->email}}</p>

Blade directives

Blade comes in with handy, straightforward syntax called Blade directives to work with PHP control structures such as conditions and loops

conditions

@if(1 + 1 == 2) {
    <h1>yes, 1 + 1 equals 2!</h1>
} else {
    <h1>no, 1 + 1 equals 10!</h1>
}

loops

@for ($i = 0; $i < 10; $i++)

The current value is {{ $i }}

@endfor

@while (true)

<p>I'm looping forever.</p>

@endwhile

Looping through an array

@foreach ($users as $user)

<p>This is user {{ $user->id }}</p>

@endforeach

@forelse ($users as $user)

<li>{{ $user->name }}</li>

@empty

<p>No users</p>

@endforelse

There are many other useful directives such as displaying data if user is authenticated or not, including or re-using other template files... I suggest you check them out

Working with forms

CSRF protection
If you ever worked with forms with PHP, You may have heard the saying "Never trust the user's input". Laravel provides an easy way to prevent CSRF requests

Use the @csrf directive in every form, And you're done!

<form action="" method="POST">
    @csrf

    <input name="name" type="text" />
    <input name="email" type="email" />
    <input name="password" type="password" />

    <input type="submit" />
</form>

Handling form requests

Your form actions should point to a route that is defined in web.php (see Routing section), that preferably pass the request to a controller (see Controllers section)

Laravel has a Request class to interact with the HTTP request

retrieving the inputs

class UserController extends Controller
{

public function store(Request $request)

{
    // all inputs values as an array
    $inputs = $request->all();

    // specific input value
    $name = $request->input('name');


}

}

Working with databases

Connecting to database

Connecting to your database is easy! go to .env file in the root directory and fill in the fields

By default laravel uses mysql

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=my_database
DB_USERNAME=root
DB_PASSWORD=

And you're done!.

the whole interaction with the database will be through "migrations" and "model"

migrations

To put it simply, migrations is just a way to create a table and define the schema (columns) of your table, plus a version control system for these columns.

To create a migration type in CLI
php artisan make:migration create-posts-table

Inside the up function define the properties (the columns):

Here are all the available column types

public function up()

{

    Schema::create('posts', function (Blueprint $table) {

        $table->id();

        $table->string('title');

        $table->longText('body');

        $table->timestamps();

});

}

models

For every table, there is a corresponding model. This model is your middleman to your table. Models are used to retrieve, insert, and delete the rows of the table.

to create a model type in CLI
php artisan make:model Post

Keep in mind that Laravel is intuitive about the names, so a Post model means there is a posts table.

If you doubt that Laravel will get the table name right (like what's the plural of octopus ?! 😂). You can explicitly define the name with the protected table property


namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

protected $table = 'my_posts';

}

usually you won't add anything to the model file unless you need to change some configuration or add a relationship to other models.

You just use it right away!


use App\Models\Post

$posts = Post::all(); // get all records

$post = Post::where('title', 'Hello World')->first();

Seeders and factories

In the development stage you may want to have a sample of data in the table to work with. However it would be cumbersome to insert the data manually ,That's where factories and seeders come in.

seeders are just functions that populate the data when executed. There is a default file that comes with the installation, DBSeeder.php in database/seeders directory: Normally you'll only need that one.


class DatabaseSeeder extends Seeder {

    public function run()

    {
        Post::factory()
            ->count(20)
            ->create();
    }

}

Factories are the way you generate a fake data records, Laravel uses the faker package for that.

To create a factory type in CLI
php artisan make:factory PostFactory

class PostFactory extends Factory

{

    public function definition()

    {

        return [

            'title' => $this->faker->sentence(),

            'body' => $this->faker->text()
        ];

    }

}

To generate the data records type in CLI
php artisan db:seed

Now go to your database and you'll find the table have 10 rows.

Conclusion

I hope this article made you more familiar with Laravel, even for a bit. support me by reacting to this post. It means a lot to me!

If you have any question, or want to point out to something feel free to leave a comment.

What is your advice on writing "clean code" ?

m0nm — Wed, 06 Apr 2022 15:58:29 +0000

How to deal with procrastination and unmotivation on your learning path

m0nm — Sun, 03 Apr 2022 15:13:37 +0000

Here's the scenario: You want to learn that technology, Complete that course or build that project, But no matter what your mind wanders away, Your fingers refuse to type and you feel bored to death. I've been like this lately where i regret wasting all my time not doing something productive but the problem never cease to be.

Today i'll give you some tips that may help you to deal with it

You may find this post interesting as well:

A beginners guide on how to build projects

m0nm ・ Feb 22 ・ 5 min read

#beginners #tutorial #programming #codenewbie

Check if you're tired

This may seem obvious, But be sure that you're having enough sleep to start and you're already rested. Also It is not optimal to start learning after a long day of work/school.

Have a decisive plan

Have a decisive plan of what you're trying to learn, Don't go by your mood. Choose a course of actions and stick with it. You can explore udemy courses and see how the teacher structure the learning path so you can take some notes about it.

Remove all distractions

You should make coding your first priority on your productive hours. Don't try to code after watching a movie, or playing video game or any activity that releases dopamine, Chances are you may feel tired and "dull" to learn or code.

Step away from your computer

Another case you maybe suffering from is burnout, Burnouts are a real problem that many people has quit from software engineering industry because of it, Take a break from your computer, I recommend a nice walk or a funny show to "reset" your brain.

Break it down

Refer to the #2 tip. Don't take the whole subject all in one, Especially that you are learning new techs, If you do that you'll feel overwhelmed by the sheer size of everything (the day i read about javascript ecosystem is the day i've known the meaning of suffering 😂).

Identify what you're struggling with

If you feel stuck try to word out what are you exactly struggling with. Don't jump to something else whenever you feel stuck with something, After you identify the struggle break it down just as stated above.

Watch people code or read people's code

When you're trying to build something for the first time It's a good way to have the general idea of how it's approached by other people, You can visit youtube or github and search for examples of what you're trying to build.

What are your tips ?

How do you guys fight procrastination and unmotivation on your career/learning path 🤔? Let me know in the comments.

PS: I know the IT Crowd gifs don't make any sense but I've had fun anyway :p

Storing variables with useRef ?

m0nm — Sat, 26 Mar 2022 12:54:52 +0000

React useRef is a hook used to reference html elements (commonly inputs).

If we read the useRef definition from React docs:

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

So by reading above we can use useRef to persist variables throughout the lifetime of our app.

function App() {
    const greeting = useRef("hello world")

    //  mutating the object
    ref.current = "goodbye world"
}

Why not use a plain variable ?

The problem with variables is that they get re-initialized every time when you refresh the page or the component gets re-rendered

What about useState ?

Sure the state is persisted But the difference is when you update the state the component gets re-rendered.

What are the use cases ?

The only time i've found a use case for useRef is when i was building an infinite scroll component,

When the user reaches the end of the page the component fetches more data based on a page token (it represent the current page). The page token need to be updated on every subsequent request to match the next page. This is where i found useRef suitable for the job.

That's why i started this disscussion, What is your opinion on using useRef for storing variables ? Did you use it to solve a problem ?

Nextjs: Oauth and Credentials authentication with NextAuth

m0nm — Mon, 21 Mar 2022 12:13:22 +0000

If you've been looking for a good authentication solution for your Nextjs project you've probably heard about NextAuth.

NextAuth is a popular library with useful features such as: magic links, JWT, Sessions with databases, Arbitrary credentials and a (probably) full list of all the Oauth 2.0 providers! Today we're gonna take a look at NextAuth.

Let's Get Started

We will build a simple registration form. Once we successfully sign up either with Google, Github, or with our credentials the app will redirect us to a protected page.

This guide is divided by two part:

The first part we'll look to how to integrate Google and Github registration with our project, This is why you'll find the inputs are disabled in the starter project below.

The second part i'll talk about registering with your credentials (i'm sure you're already guessed it hehe)

You may also find this article worth taking a look at:

Form validation with useForm hook

m0nm ・ Mar 12 '22

#react #javascript #webdev #beginners

Starter Project
Configuration needed for Oauth 2.0
Configuring NextAuth
How does It Work
Signing Up
Protecting the Secret Page
Welcoming the user
Signing Out
Conclusion

Starter Project

Go ahead and clone this repo, This is just a simple form with simple styling
git clone https://github.com/m0nm/next-auth-example // clone the repo
npm install // install the deps
npm i next-auth // install next-auth package

And here is the secret page the user will be redirected to.
pretty stylish i know 😂

Configuration needed for Oauth 2.0

Before proceeding we need to get what is called as the Client ID and the Client Secret from Google and Github so we can use them for our app.

Google

Go to google console and follow me:

Create a new project

Configure Oauth screen consent

Create new Oauth credentials

Note: Since we're working on a local machine the homepage URL is: "http://localhost:3000". But once you deploy your app make sure to change it to the new website address.

Authorized JavaScript origins: http://localhost:3000
Authorized redirect URIs: http://localhost:3000/api/auth/callback/google

Github

Go to GitHub Developer website and fill the required fields

Note: Since we're working on a local machine the homepage URL is: "http://localhost:3000". But once you deploy your app make sure to change it to the new website address.
HomePage URL: http://localhost:3000
HomePage Callback URL: http://localhost:3000/api/auth/callback/github

After you finish with the fields hit "Register application" and Github will give you the client id and the client secret.

Store them in .env.local file



// .env.local
GOOGLE_ID="YOUR GOOGLE CLIENT ID"
GOOGLE_SECRET="YOUR GOOGLE CLIENT SECRET"

GITHUB_ID="YOUR GITHUB CLIENT ID"
GITHUB_SECRET="YOUR GITHUB CLIENT SECRET"

After we obtained what we need now we can continue.

Configuring NextAuth

To Add NextAuth to our app create a file called [...nextauth].js in pages/api/auth. This is a catch-all dynamic route handler, meaning that all requests (signIn, signOut) will be handled by NextAuth



import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"
import GithubProvider from "next-auth/providers/github"

export default NextAuth({
  providers: [
    // Configure Google
      GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
      }),

   // Configure Github    
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    })
  ],
})

We also need to wrap our app inside SessionProvider



import "../styles/globals.scss";
import { SessionProvider } from "next-auth/react";

function MyApp({ Component, pageProps }) {
  return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

export default MyApp;

And that's it! NextAuth is ready to be used.

How Does It Work

the NextAuth package provide a client side hook useSession and a server side method getSession. These two return a session object which we can use to protect a page or to conditionally render a component.



const {data: session} = useSession()

The session object will generally looks like this



session: {
    user: {
        name: "user name", 
        email: "user email",
        image: "user image"
    }
}

The package also provide us with signIn and signOut methods. We can know their use intuitively by their name.

Note!

The signIn() method acceptes a string that represent a provider (ex: "google" or "github"), If you don't specify an argument, the method will redirect the user to the built-in sign in page. Which we don't want in our case



// This will redirect the user to built-in sign page
<button onClick={() => signIn()}>Sign In</button>

// This will skip the built-in page and redirect the user directly to the google Oauth sign-in flow
<button onClick={() => signIn("google")}>Sign In</button>

Signing Up

Now all we is to fire signIn when a user click on Google or Github sign in button.



// ./pages/index.js

import React from "react"
import {signIn} from "next-auth/react"

function Home() {

    const handleSignIn = (provider) => {
       // the redirect url must be an absolute url!     
        const redirect = window.location.href + "/secret"

        signIn(provider, {callbackUrl: redirect})
    }

    return (
    {/* oauth */}

      {/* google */}
      <button 
          onClick={() => handleSignIn("google")}
          className={styles.oauth}>
        <Image src={googleSvg} width="18" height="18" alt="" />
        <span>Sign up with Google</span>
      </button>

      {/* github */}
      <button 
          onClick={() => handleSignIn("github")}
          className={styles.oauth}>
        <Image src={githubSvg} width="18" height="18" alt="" />
        <span>Sign up with Github</span>
      </button>
    )
}

After the user successfully sign in he will be redirected to the protected page because we specified callbackUrl option for signIn method



// the redirect url must be an absolute url!
const redirect = window.location.href + "/secret"

signIn(provider, {callbackUrl: redirect})

Protecting the Secret Page

To protect this page we need to check if there is a session, If none the user will be automatically redirected to the start page.

We'll use the getSession method on the server side to check for session and to handle redirection.



// ./pages/secret.jsx
import {getSession} from "next-auth/react"

function Secret() {
    ...
}


export const getServerSideProps = async (context) => {
  // get the session
  const session = await getSession(context);

  // redirect the user if there is no session   
    if (!session) {
    return {
      redirect: {
        destination: "/",
        permanent: false,
      },
    };
  }

  return { props: {} };
};

As you can see we're using the redirect key if no session was provided by getSession

Welcoming the user

We can use the session object we get from getSession to render the user name in the secret page



import React from "react"
import {getSession} from "next-auth/react"

function Secret() {

    return (
        <h1>Hello mr {session.user.name}</h1>
        <p>You are authorized to see this page</p>  
    )
}

export const getServerSideProps = async (context) => {
  // get the session
  const session = await getSession(context);

  // redirect the user if there is no session   
    if (!session) {
    return {
      redirect: {
        destination: "/",
        permanent: false,
      },
    };
  }

 // passing the session object to the page  
  return { props: {session} };
};

Signing Out

Just like with signing in, We have to fire signOut when the user click on sign out button



import React from "react"
import {signOut} from "next-auth/react"

function Secret() {
    const handleSignOut = () => {
        signOut()
    }
    return (
        ...
     <button onClick={handleSignOut}>Sign Out</button>
    )
}

And now our app is working, Here is the final code

Conclusion

We've reached the end of this post, If it was helpful to you i would appreciate it if you leave a ❤️. See you soon on the next part!

Nextjs theme managing with next-themes and Tailwind CSS

m0nm — Wed, 16 Mar 2022 14:00:52 +0000

next-themes is a cool package that provide an easy solution to managing your website theme. Today we're going to learn how to set up next-themes to work with Tailwind CSS

Prerequisite

Already have some experience with Nextjs
Already have some experience with Tailwind CSS
Already have some experience with next-themes

Let's Get Started!

We need to install a Next app, Tailwind CSS and next-themes.

Create a next app
npx create-next-app theme-example

Install Tailwind CSS
npm i tailwindcss postcss autoprefixer -D

And finally next-themes
npm i next-themes

Setting up next-themes

inside the _app.js file wrap Component with the ThemeProvider provided by next-themes.

Since we're using Tailwind CSS which uses class for styling, We need to pass attribute="class" for ThemeProvider to tell it we're using class to style the theme

import { ThemeProvider } from "next-themes";

function App({ Component, pageProps }) {
  return (
    <ThemeProvider attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default App;

Now we need to setup postcss and tailwind configuration for next-themes

Setting up postcss and Tailwind CSS

postcss Create a postcss.config.js file file in the root directory with the following config:

// ./postcss.config.js
module.exports = {
  plugins:{
    tailwindcss: {},
    autoprefixer: {}
  }
};

-Tailwind CSS
Create a tailwindcss.config.js file in the root directory with the following config:

Note the darkMode: class property, This tells Tailwind CSS that we're changing the theme manually instead of relying on the system preference.

module.exports = {
  darkMode: "class",
  purge: ["./components/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}"],
  theme: {},
  variants: {},
  plugins:[]
};

We're almost done. We need a special Nextjs page called _document.js, This page is used to update the <html> and <body> tags. We will update the <body> tag.

Notice the body className styling, We can specify the styling for the body depending on the theme.

// ./pages/_document.js

import React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";

class SpecialDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body className="bg-white text-black dark:bg-black dark:text-white">
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default SpecialDocument;

Aaaaand we're done! Go ahead and test it out, Pretty sure it's going to work :‑)

Note about useTheme hook

One problem you may encounter is that theme returned from calling useTheme is undefined, If that's the case for you make sure that the page is mounted on the client side!

I hope this post was helpful for you, Happy Coding!

Form validation with useForm hook

m0nm — Sat, 12 Mar 2022 09:41:56 +0000

Form validation is a crucial and a must for every website that deals with user's data, But the form validation process can sometimes be a little complicated and messy, that's why solutions such as yup or Formik exist. Today we're gonna take a look at one of the react's popular hooks: useForm and see how we can validate user's input and display error messages should it be rendered.

Why React Hook Form ?

Built with performance, UX and DX in mind
Embraces native HTML form validation
Out of the box integration with UI libraries
Small size and no dependencies
Support Yup, Zod, Superstruct, Joi, Vest, class-validator, io-ts, nope and custom

Let's Get Started

I already made a simple registration form to apply on, Go ahead and clone the repo: Click me

git clone https://github.com/m0nm/react-useform-example

Install the deps
npm install // or yarn add

After the installation has been finished now we're ready to use React Hook Form. But first we need to consider what are we going to validate, Since this is a registration form there are a couple of points to be mindfull of:

The email should be a valid email
Password must be at least 8 characters long
'Confirm Password' must match the password

After setting the requirements for a successful registration it's time to use the hook!

Don't forget to Install the package!
npm i react-hook-form // or yarn add react-hook-form

How does it work ?

The useForm hook gives us helpful methods to simplify the way we handle forms, You can look up for all the methods on the API reference but the ones we need are: register, handleSubmit, getValues and formstate

register:

this method allows you to register an input field and assert the validations conditions for the input

It looks like this:



const { register} = useForm();

<form>
<Input {...register(name, options)} />
</form>

name

Where name is the name to reference the input for the submit data:



register("email")

would output: {email: valueOfTheReferencedInput}

options

the way you condition the validation is by passing options props:



register("email", {
    required: true, 
    onChange: (e) => console.log("you're typing email")
})

handleSubmit

this function will submit the data only if the form validation is successful



const { register, handleSubmit } = useForm();

<form onSubmit={handleSubmit(() => console.log("form validation is successful"))}>
  ...
</form>

getValues

This is a helper function that allow us to get the value of our inputs, so there is no need to useState them.



const { register, getValues } = useForm();

const emailInput = getValues("email")
console.log("emailInput") // hello world 

<form> 
<input value="hello world"{...register("email")} />
</form>

formState

formState is an object that provide information about our form state, One particular property we're interested in is the errors object which contains the error messages



const {register, formState: {errors}} = useForm()

<form>
  <p>
    {errors.email?.message}
  </p>
  <input {...register("email")}/>
</form>

Let's Apply

First we need to register our inputs with the register method, so go ahead and do that:

Note that we don't need to have name attribute on our inputs since it handled by register method.



import {useForm} from "react-hook-form"

function App() {
 const {register} = useForm();

 return (
    <form>

      {/* email */}
      <input {...register("email")} type="email" id="email" />

      {/* password */}
      <input {...register("password")} type="password" id="password" />

      {/* confirm password */}
      <input {...register("confirmPassword")} type="password" id="confirmPassword" />   

        </form>
    )
}

Now we need to give each one of them the validation's conditions

For Email: It is required and It must be a valid email, so we can use required and pattern

The pattern value is called a regex expression




 {/* email */}
 <input {...register("email"), {
        required: "Please Enter Your Email!",
        pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, 
            message: "Please Enter A Valid Email!"
        }
    }} type="email" id="email" />

If the user did not type his email, the errors object from the formState will contain the message we typed with the required property, And so it's the case if the email is not valid it will contain the message from pattern

Now we can show the error message



<p className="error-message">{errors.email?.message}</p>
<input ... />

For Password: It is required and it must be longer than 8 characters



<input {...register("password"), {
        required: "Please Enter Your Password",
        minLength: {
        value: 8,
        message: "Password must be at least 8 characters long!"
        }
    }} type="password" id="password" />

The error message



<p className="error-message">{errors.password?.message}</p>
<input ... />

-For Confirm Password:
This one is special because it only need to match password for validation to pass, so we can use validate option's method, We also need getValue to get the password value



<input {...register("confirmPassword", {
        validate: (match) => {
            const password = getValues("password")
            return match === password || "Passwords should match!"
        }
    })} type="password" id="confirmPassword" />

And the error message



<p className="error-message">{errors.confirmPassword?.message}</p>
<input ... />

Now we're finished with the validation! It's time to use handleSubmit



<form onSubmit={handleSubmit(() => console.log("user registered successfully!"))}>
    ...
</form>

Here is our form if we submit without filling the data

And if we don't meet the conditions

You can find the final code on this repo: Click me

Integrating with a schema validator

As an alternative for register options, You can use a schema validator instead such as yup which i'll use to demonstrate.

Install the dependency npm i yup // or yarn add yup
We also need the yup resolver for react-hook-form npm i @hookform/resolvers/yup

Let's define our schema



import * as yup from "yup";

const schema = yup.object().shape({
  email: yup
    .string()
    .email("Please enter a valid email!")
    .required("Email is required!"),
  password: yup
    .string()
    .min(6, "Password must be longer than 6 characters!")
    .required("Password is required!"),
  confirmPassword: yup
    .string()
    .oneOf([yup.ref("password"), null], "Passwords must match!"),
});


function App() {
    ...
}

Lets use the schema



import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";

const schema = yup...

function App() {
     const {
    register,
    getValues,
    formState: { errors },
    handleSubmit,
  } = useForm({ resolver: yupResolver(schema) });

    return (
        <form>
            <p className="error-message">{errors.email?.message}</p>
            <input {...register("email")} />
                ...
        </form> 
    )
}

And that it!

Conclusion

We reached the end of this post, Thank you for reading i hope it was helpful and clear :). Happy react-hook-forming!!

CSS Emmets: A guide for everyone

m0nm — Fri, 04 Mar 2022 12:45:50 +0000

Emmet is known to be the most loved and indispensable feature of vscode, Today you'll know how you can use it to speed up your css workflow.

Let's get started

Unit Values

You can specify values for every property that has a unit, For:
100 --> 100px
100p --> 100%
100r --> 100rem
100e --> 100em

Example:
m100 --> margin: 100px
m100p --> margin: 100%
m100r --> margin: 100rem
m100e --> margin: 100em

Margin and Padding

m --> margin: ;
mt --> margin-top: ;
mb --> margin-bottom: ;

Same way applies to padding
pr --> padding-right: ;
pl --> padding-left: ;

Width and Height

w --> width: ;
maw --> max-width: ;
miw --> min-width: ;

h --> height: ;
mah —> max-height: ;
mih --> min-height: ;

Color

type c# followed by the color value, You can write one, two, three or six characters as color value:

c#1 --> color: #111111
c#e0 --> color: #e0e0e0
c#fc0 --> color: #ffcc00

Font

fz --> font-size: ;
fw --> font-weight: ;
ff --> font-family: ;
fs --> font-style: ;

Position

type pos: followed by the first letter of the position's values

pos:r --> position: relative
pos:a --> position: absolute
pos:f --> position: fixed
pos:s --> position: static

t10 --> top: 10px
b10p --> bottom: 10%
r --> right: ;
l --> left: ;

Display

type d: followed by the first letter of the display's values

d:b --> display: block
d:i --> display: inline
d:ib --> display: inline-block
d:f --> display: flex
d:if --> display: inline-flex
d:g --> display: grid
d:ig --> display: inline-grid
d:n --> display: none

Border

bd --> border: ;
bd:n --> border:none;
bd+ --> border:1px solid #000;

the `!important` modifier

just add ! after the property's first letter
p! --> padding: !important;

Grouping properties

You can write multiple properties in one line by using the plus + sign

For example: m10+p20r+bd++c#1 will produce:

    /* m10 */
  margin: 10px;
    /* p20r */
  padding: 20rem;
    /* bd+ */
  border: 1px solid #000;
    /* c#1   */
  color: #111;

Conclusion

See how Emmet is a powerful tool! Don't forget to leave a ❤️ if this post was helpful to you!

Happy Emmeting!

Javascript DOM manipulation cheatsheet

m0nm — Wed, 02 Mar 2022 17:56:57 +0000

The Document Object Model (referred as the DOM) is the means that allowed developers to add interactivity to their websites, DOM is an essential part to learn to be a good javascript developers so today i'll give a cheatsheet to master the manipulation of the DOM

Prerequisite

This post is intended to be a refresh so i expect you to know the basics of javascript as well as basic knowledge of what the DOM is all about.

Creating elements

const element = document.createElement('element')
parentElement.appendChild(element)

const div = document.createElement('div')
body.appendChild(div)

const ul = document.createElement('ul')
const li = document.createElement('li')
ul.appendChild(li)

removing elements

you can remove an element either by using removeChild or with remove methods

// with removeChild method
parent.removeChild(child)
// with remove method
child.remove()

ul.removeChild(li)
// or
li.remove()

Querying elements

query an element that has an id

const element = document.getElementById('elementId')

const container = document.getElementById('container')

query all elements by tag name (there is no similar method to find only one element by tag name)

const groupOfElements = document.getElementsByTagName('tag')

const inputs = document.getElementsByTagName('input')

All in one

// query by id
const element = document.querySelector('#elementId')

// query group of elements by id (which ignores the purpose of having a special id)
const elements.querySelectorAll('#elementId')

// query element by class name
const element = document.querySelector('.className')

// query group of elements by class name
const elements = document.querySelectorAll('.className')

Modify elements

modifying element's attributes

modifying the style object

element.style.fontSize = "18px"
element.style.backgroundColor = "#ffffff"

modifying the id:

element.id = "myId"

modifying the class

element.classList.add('myClass')

element.classList.remove('myClass')

modifying the text

const element.innerText = "Hello World"

There is also textContent property for this job, However you would rather use innerTextinstead.

modifying the attribute in general

element.setAttribute(attribute, value)

input.setAttribute(name, "myInput")

element.removeAttribute(attribute)

input.removeAttribute('name')

Event Listeners

Here is a list of the popular events you'll likely to use: change, click, submit, keydown... and more

element.addEventListener('event', () => {
// Do something...
}

button.addEventListener('click', () => {
alert('Hello There!')
}

Conclusion

If this post was helpful for you i would appreciate it if you leave a 💓

DEV Community: m0nm

Understanding ReactJS re-renders and memoization

Table of Contents

What is rendering

The ReactJS rendering cycle

When initializing the component

When re-rendering a component

What triggers a re-render?

The component state has changed

useState vs useReducer: What are they and when to use them?

m0nm ・ Feb 19 '22

The component parent is re-rendered

Context value has changed

What about props change?

Memoization techniques

memo

Composition

Using component's props

useMemo

useCallback

You're trading time with memory!

Further Reading

Conclusion

Nextjs: Oauth and Credentials authentication with NextAuth - Part 2

Nextjs: Oauth and Credentials authentication with NextAuth

m0nm ・ Mar 21 '22

Let's Get Started

Setting up Credential Provider

Adding the credentials fields

The authorize function

Conclusion

Painless conditional classes with classnames package

Conclusion

Laravel 9: Overview for newcomers

Table of contents

So what is Laravel ?

Setting up Laravel

Overview of Laravel main components

Routing

Controllers

Blade template engine

Working with forms

Working with databases

Connecting to database

migrations

models

Seeders and factories

Conclusion

What is your advice on writing "clean code" ?

How to deal with procrastination and unmotivation on your learning path

A beginners guide on how to build projects

m0nm ・ Feb 22 ・ 5 min read

Check if you're tired

Have a decisive plan

Remove all distractions

Step away from your computer

Break it down

Identify what you're struggling with

Watch people code or read people's code

What are your tips ?

Storing variables with useRef ?

Why not use a plain variable ?

What about useState ?

What are the use cases ?

Nextjs: Oauth and Credentials authentication with NextAuth

Let's Get Started

Form validation with useForm hook

m0nm ・ Mar 12 '22

Table Of Contents

Starter Project

Configuration needed for Oauth 2.0

Google

Github

Configuring NextAuth

How Does It Work

Note!

Signing Up

Protecting the Secret Page

Welcoming the user

Signing Out

`memo`

`useMemo`

`useCallback`

the `!important` modifier