DEV Community: Kada Guetouache

Master Modal, Tooltips and more with React createPortal

Kada Guetouache — Wed, 04 Sep 2024 12:38:46 +0000

creating modals and tooltips in React was often complex hard to style and leads to many styling errors.
createPortal api simplify this process allowing to render components outside the main DOM, which results in ease of styling and maintainability. In this post we will learn how to use this tool to create modals and tooltips the right way in React.

Understanding createPortal api

createPortal is React build-in function that allows you to render component in different parts of the DOM. And it's particularly useful for building: Modals and Overlay, third-party Components and custom UI elements.

How it works

A portal is used inside the return statement of the component and it only changes the the physical placement of DOM node. it's like teleporting a DOM node outside the main DOM tree. The createPortal API access two parameters and third optional one:

Children: anything that can be rendered with React, a div, component or React fragment.
domNode: which is the location of the children to be placed.
key (optional): a unique number or string to be used as portal key.

If we assume that we create a portal in component A and render it in component B, the children of the portal will access all the state and variable of component A and function as it is in component A while it's been rendered in component B.

Creating and using portal

In the example below portal is used to teleport component Child that accepts a state and move this component to the body.

import { createPortal } from 'react-dom'

const App = () => {
  const [state, setState] = useState()

  return(
    <div>
      <p> ... </p>
      createPoratl(
        <Child state={state} />,
        document.body
      )
    </div>
  )
}

export default App

Now the child component will be rendered in body tags in HTML.

Conclusion

createPortal is a valuable tool in React for creating modals, tooltips, and other components that need to be rendered outside of main DOM tree. by using this tool you can achieve a cleaner, more flexible, and more efficient approach of these elements.

Understanding useRef: A Beginners Guide

Kada Guetouache — Mon, 02 Sep 2024 14:19:20 +0000

Introduction

What is `useRef`

useRef is React hook that allows to create a persistent reference to a value or a DOM element. Unlike useState, which is used to manage state that triggers re-renders, useRef is primarily used for side effects or accessing DOM elements directly.

Why use `useRef`

The useRef hook is particularly useful for:

Accessing DOM elements directly: you can use useRef to get a reference to a DOM element, allowing you to manipulate it directly without triggering a re-render.
Create persistent values: Unlike state, values created with useRef persist between renders, making them ideal for storing data that doesn't need to trigger re-renders.

Understanding the `useRef` hook

The useRef hook returns an object with .current property. when you call useRef, it creates a persistent reference to the value you pass as argument. This reference is stored in .current property of the returned object.

Creating a reference with `useRef`

To create a reference simply call useRef with initial value.

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  return (...)
}

export default App

In the above example countRef is a reference to the initial value 0.

Accessing the reference value

To access the reference value just call the countRef object with .current property

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  const increment = () => {
    countRef.current++
  }

  return (
    <div>
      <p>Count: {countRef.current}</p>
      <button onClick={increment}>Increment</button>
    </div>
  )
}

export default App

In the above example if you click the button it will call the increment function which will increase the countRef, but the count won't be updated at <p>Count: {countRef.current}</p> because updating useRef don't cause re-renders like useState.

update the code to example below to get the result you expect.

import { useRef, useState } from 'react'

const App = () => {
  const countRef = useRef(0)
  const [count, setCount] = useState(0)

  const increment = () => {
    countRef.current++
    setCount(countRef.current)
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  )
}

export default App

Common use cases for `useRef`

Directly accessing and manipulating `DOM` elements

it's possible to use useRef hook to access and change the properties of html elements


const App = () => {
  const inputRef = useRef(null)

  const handleFocus = () => {
    inputRef.current.focus()
  }

  return(
    <input ref={inputRef} />
  )
}

Persistent Values

Unlike useState or variable, useRef can pass values and data between re-renders such as cached data or configuration settings.

Performance Optimization

In some cases, using useRef can help with component optimization by avoiding unnecessary re-renders. like if you have a component that renders a large list of items you can cache it using useRef and only modify re-render the items that have changed.

Best practices and considurations

Do not write or read ref.current during rendering
You can mutate the ref.current property
When you change the ref.current property, React does not re-render your component
The information is local to each copy of your component (unlike the variables outside, which are shared).You can store information between re-renders (unlike regular variables, which reset on every render).
You can read or write refs from event handlers or effects instead.
Manipulating the dom with ref

Passing a ref to custom component.

If you try to pass a ref to your own component like this

const inputRef = useRef(null);

return <MyInput ref={inputRef} />;

You might get an error in the console:
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

To solve this issue wrap the custom component with forwardRef like so:

const inputRef = useRef(null);

return <MyInput value={value} ref={inputRef} />;

Custom component:

import { forwardRef } from 'react';

const MyInput = forwardRef(({ value, onChange }, ref) => {
  return (
    <input
      value={value}
      onChange={onChange}
      ref={ref}
    />
  );
});

export default MyInput;

Conclusion

useRef is a powerful hook that is primarily used for side effect usage like caching data between re-renders or accessing elements of the DOM. It's a great tool for performance optimization and achieving specific functionalities in React application.

Understanding `useMemo` and `useCallback`: A Comprehensive Guide

Kada Guetouache — Tue, 27 Aug 2024 15:10:49 +0000

useMemo and useCallback are two powerfull React hooks that play a crucial role in prevent un-necessary re-renders which result in optimizing component performance. They are essential tools for developers to create responsive and efficient React application.

In this guide will dive into explaining useMemo and useCallback what are their similarities and how they differ from each other. We will understand how to implement them, When to use each one.

why should you use `useMemo` or `useCallback`

Usually in React most calculation are fast, But sometimes you have a calculation on very large array, or some expensive computation that don't need to execute on every re-render.

useMemo and useCallback hooks can help solve this issue by caching those expensive computation between re-renders.

what is `useMemo` and how to use it.

useMemo is React hook that caches the result of a calculation between re-renders and it takes two arguments:

CalculatedValue: The function calculating the value you want to cache. The function should not accept any parameters and it should be pure, and return any type of value. React will return the same calculated result if the dependencies has not changed, Otherwise it will calculate a new result and cache it.
dependencies: the list of all reactive values references that are inside your CalculatedValue, from states variables constants and function calls. React will try to compare each reactive value with it's previous value using Object.it comparison.

`useMemo` usage

To cache a calculation between re-renders wrap it a useMemo hook at the top level of the component.

useMemo(fn, dependencies)

const App = () => {
  const useMemo(() => {
    filterTodo(todos, tab)
  }, [todos, tab])
  return(...)
}

export default App

Notice that the first parameter of useMemo is a function with no parameters.

The first time React will calculate the result value of first parameter of useMemo, Then memoize the second parameter which is the list of dependencies. React will cache the calculated result between re-renders and only re-calculate the result when one of the dependencies values changes.

what is `useCallback` and how to use it.

useCallback hook is the same as useMemo hook with the only different of that this hook will cache the function (first paramter for useCallback) without calculating the value. Also the function can accept parameters unlike in useMemo.

To use useCallback you need to pass parameters:

A Function definition that needs to be cached.
List of dependencies

const cachedFn = useCallback(fn, dependencies)

import { useCallback } from 'react';

export default function ProductPage({ productId }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

When to use `useMemo` over `useCallback`

If you'r primarily concerned with optimizing the result of calculation, use useMemo.
If you're primarily concered with preventing unnecessary re-renders due to function changes, use useCallback.

Skipping re-renders of a component

Sometimes you will have a parent component that need to re-render which will result also in the re-render of child component. It's possible to cache a component using memo.

Lets assume we have a Todolist component with theme state, and a List component as child. Whenever the state of theme changes the List Component re-render which is not necessary. to solve this issue use memo.

we wrap the functional component of List with memo.

export default function TodoList({ todos, tab, theme }) {
  // ...
  return (
    <div className={theme}>
      <List items={visibleTodos} />
    </div>
  );
}

import { memo } from 'react';

const List = memo(function List({ items }) {
  // ...
});

Conclusion

In this comprehensive guide we have understand useMemo and useCallback hooks, How to use each one of them, When to use each of them, And explained their benefits for optimizing the performance of React application.

useReducer: Beyond useState for Complex State Logic

Kada Guetouache — Sun, 25 Aug 2024 14:48:37 +0000

React's useState hooks is very powerful tool to manage states withing functional components. It's simple and perfect for handling simple state changes like updating a boolean, a string or a counter. but as the state grows in complexity like the state of form fields useState hooks show it's limitations.

Dealing with multiple interrelated pieces of state or complex state logic can be very difficult to manage using useState. This is where useReducer hook comes in, It provider a structured and maintainable approach for dealing with complex state scenarios.

The benefits of useReducer hook.

useReducer hook centralize state logic and creates a single source of truth for updating state by encapsulating state logic within reducer function. The reducer is a pure function which ensure that given same input always produce same output, which makes the state more predictable and testable.

This hook also improve and organize code by separating state logic from component which also result in performance enhancement sometimes.

Understanding useReducer.

there is 3 core concepts that must be understand in useReducer hook which are:

State: similar to useState it represent the data that the component need to render.
Action: an Object that has type property to identify the action and custom payload for additional data.
Reducer: it's a pure function that accepts the state and action as parameters and return the state it is within the reducer function how the state change is determined.

In this example we will create a simple counter by pressing a button using useReducer, Then later add a name and updating to show an example of complex and unrelated state updates.

Implementing useReducer logic.

First create a constant with initial state above the component.

const initialState = {counter: 0}

const App = () => {
  ...
}
export default App;

In the component the reducer function must be created outside the functional component. That function will accept a state and action as parameters, then will use switch statement to determine the type of the action and change the state if the action is unknown then will return just the state and the component won't re-render because the state hasn't changed as it's determined by Object.is.

const initialState = {counter: 0}

const reducer = (state, action) => {
  switch(action.type) {
    case "increment_counter":
      return {
         counter = state.counter + 1
      }
    default: 
      return state
  }
}

const App = () => {
  ...
}
export default App;

Inside the component we call useReducer, which accepts the reducer function and an initial state.
PS: the initial state can be calculated and passed as function but we must pass reducer the props of state function then the state function like this

const initialStateFn = (name) => {...}
const [state dispatch] = useReducer(reducer, name, initialStateFn)

we can access the state and dispatch function from useReducer hook. the dispatch function accepts an object with the type of the action and options parameter to determine how the state will be updated in reducer function.

import {useReducer} from 'react'

const initialState = {counter: 0}

const reducer = (state, action) => {
  switch(action.type) {
    case "increment_counter":
      return {
         counter = state.counter + 1
      }
    default: 
      return state
  }
}

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState)
  return (...)
}
export default App;

now we can display and update the state inside the return statement of component like so

const App = () => {
  ...
  return (
   <div>
     <button onClick={() => dispatch({type: 'increment_count'})>Increment counter</button>
     <p>{state.counter}</p>
   </div>
  )
}

Making state more complex

Now we also want to add input and type something on it, Will have to update the logic in 3 different place.
Update the initial state to include like a name

const initialState = {
  counter: 0,
  name: ''
}

Update switch statement to handle the action of updating the input will call it updateName. we also need return new state object to keep the previous state intact in this example the counter will kept it's previous state when the state of the name is been updated.
also notice we are using action.nextName which is an optional parameter passed to dispatch function dispatch({type: 'changeName', nextName: nextName}), well add next.

const reducer = (state, action) => {
  switch(action.type) {
    case "increment_counter":
      return { 
         ...state, 
         counter = state.counter + 1
      }
    case "updateName":
      return {
         ...state,
         name = action.nextName
      }
    default: 
      return state
  }
}

Update the markup in component.


const App = () => { 
  ...
  return(
    <div>
      ...
      <input value={state.value} 
        onChange={(event) => dispatch({
          type: 'updateName', 
          nextName: event.target.value
        })}
      />
    </div>
  )
}

In the end will have something like this.

import {useReducer} from 'react'

const initialState = {
  counter: 0,
  name: ''
}

const reducer = (state, action) => {
  switch(action.type) {
    case "increment_counter":
      return { 
         ...state, 
         counter = state.counter + 1
      }
    case "updateName":
      return {
         ...state,
         name = action.nextName
      }
    default: 
      return state
  }
}

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState)
  return (
   <div>
     <button onClick={() => dispatch({type: 'increment_count'})>Increment counter</button>
     <p>{state.counter}</p>
     <input value={state.value} 
        onChange={(event) => dispatch({
          type: 'updateName', 
          nextName: event.target.value
        })} />
   </div>
  )
}
export default App;

Conclusion

By understanding and utilizing the useReducer hook, you can handle complex state logic, promote code organization and improve the predictability of the state, making this hook invaluable for building scalable and maintainable components.

How to use the useTransition hook the improve performance in React

Kada Guetouache — Wed, 21 Aug 2024 15:11:15 +0000

React is a popular JavaScript library for building user interfaces. It’s known for efficiency and focus on creating reusable UI components. one of key features in React is the introduction of hooks which are function that hooks into React state. on of those hooks is the useTransition hook. This hook allows the state change to happen without blocking the interface which result in smooth experience.

Understanding useTransition hook

To understand the useTransition hook better we will look into the following example.

import {useState} from "react"

const App = () => {
  const [post, setPost] = useState(undefined)

  const fetchData = async () => {
    await fetch("https://jsonplaceholder.org/posts/1")
      .then((result) => result.json())
      .then((result) => setPost(result))
  }

  return(
    <div>
      {post !== undefined && (
      <div className="post-card">
        <h2>{post?.title}</h2>
        <image src={post?.image} />
        <p>{post?.content}</p>
      </div>
      )}
      <button onClick={fetchData}>
        Get post
      </button>
    </div>
  )
}

export default App;

when the use click the button depending on how slow the internet is or how heavy the task executed inside the fetchData function, The UI may freeze durring the fetch task which will result in poor user experience. also there is the possibility of user spamming the button in case if you don’t want the user abuse your application. Also the application don’t show the user any indication that their is an operation in process.

Those issues can easily be fixed using the useTransition hook we can update the previous code into something like this.

import {useState, useTransition} from "react"
import {ImSpinner2} from "react-icons/im"

const App = () => {
  const [pending, startTransition] = useTransition()
  const [post, setPost] = useState({})

  const fetchData = () => {
    startTransition( async () => {
      await fetch("https://jsonplaceholder.org/posts/1")
        .then((result) => result.json())
        .then((result) => setPost(result))
    })
  }

  return(
    <div>
      {post !== undefined && (
      <div className="post-card">
        <h2>{post.title}</h2>
        <image src={post.image} />
        <p>{post.content}</p>
      </div>
      )}
      <button
        disabled={pending} 
        onClick={fetchData}>
        {pending ? <ImSpinner2 className="animate-spin" /> : "Get post" }
      </button>
    </div>
  )
}

export default App;

The invoked useTransition hook return two values: pending which value will be true if the task is been executed and startTransition function contains the task that my be interrupted by more urgent tasks.

In the example above we wrapped the fetch request in side an asynchronous arrow function that is inside the startTransition function.

and in the button we modify it in such way that includes a disabled attributes that is linked to pending and we changed the label of the button to show a spinner when the task is pending and show the label “Get post” when the task is not pending.

This result in smooth user experience and provide a better performance and secure your application from user misbehavior.

Conclusion

The useTransition hook is a game-changer for building performant React application with smooth user experience. It ensures that the UI remain responsive during potentially slow operations and preventing UI freeze which enhances the overall user experience.

React Context API: A Comprehensive Guide

Kada Guetouache — Sun, 18 Aug 2024 14:05:53 +0000

Introduction

React context API is a way to share state across multiple components without the need to pass data through each level of component tree. React context API essentially creates a data layer that allows components to subscribe and access data without been direct child of the component that's providing the data.

Why use React Context API

The context API creates a global state that is accessible through the whole application which results in simple and structured data flow through components and makes the hole code cleaner and organized.

Understanding the basics

Through this whole post we will be creating a global theme context just for the sake of simplicity.

Creating a context

we will create a file called themeContext.jsx and passed the following logic in it.

creating a context can be done in simple steps which is importing and calling createContext with default options



import {createContext} from 'react'

export const ThemeContext = createContext('light')

we will also need to change the theme mode so we are going to add a function to default options.



import {createContext} from 'react'

export const ThemeContext = createContext({
      theme: 'light', 
      setTheme: () => {}
})

Creating a Provider

For our context API be accessible through all components, we will need to create a provider and then wrap our application or parts of it with the context provider. In this case we will wrap the whole application.

most of context API logic will also be inside the provider for our case we will only need a useState to change the theme mode but more expensive logic can be placed in context provider.

Steps:

import useState cause we will need it.
create a functionnal components and export it for better naming convention we will call it ThemeProvider.
the ThemeProvider must accept children because we are gonna wrapped it around our application in main.jsx file (I'm using React with Vite).
Create a Theme state in our case the logic is only needed. but more complex logic can be used in here.
return ThemeContext.Provider the ThemeContext created in first step, then pass to it theme, setTheme to value because we want to access those values in other components.



import {useStaet} from 'react'

export const ThemeProvider = ({children}) => {
  const [theme, setTheme] = useState('light')

  return (
    <ThemeContext.Provider value={{theme, setTheme}}>
      {children}
    </ThemeContext.Provider>
  )
}

Next step is to go starting point of your application, this works for our case put you choose other location depending of your use case.
import the ThemeProvider and wrap <App /> with our context provider. This step make sure that the theme, setTheme state is accessible through the whole application.



createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </StrictMode>,
)

Consuming the provider

Now in any other component we will need to call useContext from react and ThemeContext from themeContext.jsx file.

then destruct the theme,setTheme values and use them in you component.



import {useContext} from 'react'
import {ThemeContext} from './themeContext'

const App = () => {  
  const {theme, setTheme} = useContext(ThemeContext)
  // some logic to change background color here

  return(
   <div>
     <button onClick={() => setTheme("light")}>Light</button>
     <button onClick={() => setTheme("dark")}>Dark</button>
   </div>
  )
}

export default App;

Enhancing Context API with custom react hook

PS: I have already created a post about getting started with custom hooks in react if you have any issues please click here

we can avoid calling useContext from react and ThemeContext by defining a custom react hook.
In themeContext.jsx file create a custom hooks called useTheme




const useTheme = () => {
  const context = useContext(ThemeContext)

  if (!context) throw New Error('something went wrong!')

  return context
}

and in other components just import this custom hook



import {useTheme} from 'themeContext'

const App = () => {

  const {theme, setTheme} = useTheme()

return(...)

}

Conclusion

In this guide we have dived into understanding the context API, and demonstrate it's efficacy in streaming data across the components of your application. We have created a context and it's provider and wrapped our app with context provider and learn how to consume the provider and even enhance the code by utilizing custom hooks.

Thank you for reading.

Reusing Logic in React with Custom Hooks: a Practical guide

Kada Guetouache — Fri, 16 Aug 2024 09:43:47 +0000

Custom hooks are a powerful feature in React that are used for more specific purposes unlike React build-in hooks, and it's done by encapsulating common functionalities into independent functions. custom hooks promote re-usability, improve component organization and overall enhance code maintainability.

In this guide will dive into the purposes of using a custom hooks, understanding the fundamental of creating custom hook and how to use it other components. then we will illustrate a real world example by building a fetch API custom hook.

Understanding the basics

usually developer get scared of term custom hooks so lets demystify it.

a custom hooks is simply a function that start with the use prefix (which is crucial for the custom hooks to work).
this function consist of reusable logic that utilize React build-in hooks. usually you consider using a custom hook if you have same logic across multiple component so by utilizing custom hooks you can solve multiple issues like enhance code organization and maintainability.

Creating a simple custom hook

The example below is a simple counter custom hook that manages the count state using useState hook and update the count respectively using increment or decrement functions that only set the count state.

import { useState } from 'react'

const useCount = () => {
  const [count, setCount] = useState(0)

  const increment = () => setCount(prev => prev + 1)
  const decrement = () => setCount(prev => prev - 1)

  return { count, increment, decrement }
}

export default useCount;

congrats you just build your very own custom hooks it's pretty simple. next will dive into how to use this hook

Using custom hooks in components

using custom hooks in another components is simply done by destruction the returned values form the custom hook inside other components

import useCount from 'customHooks'

const Page = () => {
  const {count, increment, decrement} = useCount()

  return(
    <div>{ count }</div>
    <button onClick={increment}> + </button>
    <button onClick={decrement}> - </button>
  )
}

export default Page

Real world example of using custom hook

one of the most repetitive logic is fetching an API an e-commerce site will fetch data for authentication, payment process, displaying all the products, comments, reviews ... etc.

you can imagine the amount of repetitive fetching logic across the application which can be simplified using a custom hook.

in this section will create a custom fetching hook.

we will be using useState and useEffect build-in React hooks
we are gonna have a state for data, a state of pending in case we want to show a spinner while the data is fetching and error state in case of fetch failure.

the code below is self explanatory. inside useEffect we define a fetchData function that is asynchronous and that will handle the fetching logic. below the useEffect the custom hook will return the following values which can be used in all other components data, pending, error.

notice that we are passing a url value to useFetch custom hook paramater which means that data can be passed to custom hooks

import {useState, useEffect} from 'react'

const useFetch = (url: string) => {
  const [data, setData] = useState<any>([])
  const [pending, setPending] = useState(false)
  const [error, setError] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      setPending(true)

      await fetch(url)
        .then(result => {
          if (!result.ok) throw new Error('something went wrong!')
          return result.json()
        })
        .then(result => {
          setData(result)
          setPending(false)
        })
        .catch(error => setError(error))
    }

   fetchData()
  }, [url])

  return { data, pending, error }

}

export default useFetch

by using the useFetch hook inside Page components we can now display message to client in case of error, show a spinner while the data is fetching and finally display data to client.

this component can be used repeatedly across all the application which decreases the amount of repetitive code.

import useFetch from './hooks/useFetch'
import Spinner from "./icons/Spinner"

const Page = () => {
  const {data, pending, error} = useFetch('https://jsonplaceholder.typicode.com/posts')

  if(error) <div>Cloud not fetch data from the server</div>

  return(
    {pending ? 
     ( <Spinner />)
     :
     (
      data.map((item) => (
        <div>
          <h3>{item.title}</h3>  
          <p>{item.body}</div>
        </div>
       )
      )
    )}
  )
}

export default Page;

Conclusion

Custom hooks offer a powerful mechanism for encapsulating and reusing logic within React components, By extracting common functionalities into a dedicated functions, you can enhance code organization, improve maintainability, and promote code re-usability.

We have explored the fundamentals of creating custom hooks, understanding how to use them within React components and show a real world example of using a custom hook.

What is pnpm and why should you use it?

Kada Guetouache — Mon, 25 Oct 2021 19:52:32 +0000

Have you ever seen the memes on Reddit thread of Twitter

or this!

you can find more on this link

npm is package manager tool for JavaScript in almost every web development project especially front-end projects.

But this tools comes with different problems I'm sure your facing now which are:

the install process is kind of slow
not very friend log message.
large node_modules folder in every single project.

Facebook came up with an alternative tool yarn, it bit faster and have more friendly code log but have the same storage issue. I used to solve this issue by creating a main node_modules folder in my hard disk and use symlinks to all my folders, but it's kind of frustrating so I drop this solution not very long after.

recently I have read about a new tool that solves the three issues that we discussed above that tool is called pnpm. pnpm is tools that is very similar to npm, if familiar with how npm commands pnpm is just the same. when using npm or yarn if have 1000 project that means you will have 1000 dependencies folder in each project in your hard drive, pnpm will install all the dependencies in one universal folder that is linked to all of your 1000 project using sumlinks that is managed for you under the hood.

this approach solve all the issues that we discussed earlier if you have already installed a dependency it will use that one instead of downloading in from the start. this means less storage used and faster installing process how cool is that, it even have a very minimalist log message.

the first day I used pnpm I felt over the top because it solves an issue I hated so mush and after couple of days using it I've had no issues using it so I felt that I need to share this tool with everyone that didn't hear about.

conclusion:
pnpm is yet another package manager tool that is responsible for installing Javascript dependencies it's just more faster and more convenient and has a minimalist friendly log message.

if you know any other tools that I didn't hear about I'd love you to share your knowledge with me.

Getting Started with WSL 2 Part 2

Kada Guetouache — Sun, 12 Jul 2020 18:59:28 +0000

If you have read my first post and install WSL2 successfully and you are like me having a laptop with only 4 Gigs of RAM or using a very slow machine you will start immediately to notice that there is a process goes with that name vmmem on Task Manager that eats a lot of RAM this process is a very small virtual machine made by windows to run Linux and use the Linux Kernel it consumes less RAM than a regular Virtual Machyine but still may be a problem for some.

I have read some issue on Github that some users working with docker consume up to 30GB of RAM which is very ridiculous.

for low-end PC it doesn't mean it will break your PC but this process will happily consumes all available RAM leaving the host OS (windows) paralyzed luckily the team at Microsoft already provide a fix for this problem.

Table of content

Getting familiar with wsl command on PowerShell.
Setting up a config file for WSL.
Gift!. *Conclusion.

PS : if you want to just solve the RAM issue jump to setting a config file for WSL.

Getting familiar with `wsl` command on PowerShell.

To check how many distros you have installed or see what distros are currently running the Microsoft Team have provide a very useful utility that can provide with helpful information and can do a bunch of actions all the commands will be typed in PowerShell.

For the start i recommend you to check wsl -h command and see the full documentation of this tool and fear not it's not very long.

Basic Commands

wsl will start the default Linux distro for you.
wsl -l will list all available distros.
wsl -l -v will list all distros along with their state and version. NOTE version 2 is the one that comes with Linux Kernel.
wsl distro-name --set-version 2 will change the disto to version 2 or use 1 for older version.
wsl distro-name --set-default will make the distro a default one.
wsl --shutdown will terminal all distro and shutdown the virtual machine vmmem process in task manager.

Setting up a config file for WSL.

It is possible to set a global setting for WSL2 in file that should be exist in user folder ex: C:/Users/Adam, this file allows us to define the max RAM WSL2 should consume.

the file name is .wslconfig and comes in this form

[wsl2]
kernel=              # An absolute Windows path to a custom Linux kernel.
memory=              # How much memory to assign to the WSL2 VM.
processors=        # How many processors to assign to the WSL2 VM.
swap=                # How much swap space to add to the WSL2 VM. 0 for no swap file.
swapFile=            # An absolute Windows path to the swap vhd.
localhostForwarding= # Boolean specifying if ports bound to wildcard or localhost in the WSL2 VM should be connectable from the host via localhost:port (default true).

#  entries must be absolute Windows paths with escaped backslashes, for example C:\\Users\\Adam\\kernel
#  entries must be size followed by unit, for example 8GB or 512MB

Open notepad.
copy and paste this code.
Save the file with the name .wslconfig.
Go to Powershell and type wsl --shutdown to close the vmmem and start it with wsl.

[wsl2]
memory=512MB
swap=4GB
localhostForwading=true

the next time you use WSL2 it won't consume more than what you have defined for it to consume.

Gift!.

You may have experiencing an issue with hard drive if it full then you can easily move your WSL distro to another hard disk, by exporting and importing it back into a new folder as another WSL distro.

The process.

First open PowerShell.
type wsl -l -v to list all distro names.
export the distro wiht this command wsl --export distro-name location-of-distro.tar example wsl --export kali-linux C:/temp/kali.tar.
Take a coffe break !.
Then import the distro into another hard disk wsl --import distro-new-name distro-new-destination tar-file-location example wsl --import kali-linux-2 F:/wsl C:/temp/kali.tar.
Take coffe break !.

after that open Powershell and type wsl -l -v you will find a new distro with new name kali-linux-2 that resides in the new location, you will end up with two kali linux distro all you have to do is wsl distro-name --unregister ex wsl kali-linux --unregister.

In the end the new imported distro will only start with root not your previous user-account the fix for this problem is on of these three options:

Launching using PowerShell command wsl -d kali-linux-2 -u kaliuser.
Windows Terminal go to setting and add this snip code to your distro profile at the end "commandline" : "wsl.exe -d kali-linux-2 -u kaliuser".
Change the default user at start with Powershell using this code <DistributionName> config --default-user <Username> like kali-linux --default-user omar.

Getting Started with WSL 2

Kada Guetouache — Sat, 04 Jul 2020 14:15:07 +0000

Windows 10 update 2004 has been release with new features an teaks for the overall OS but the most important features for me and for most developers is the WSL2 and the integration of Linux Kernel which have solved allot of issue that WSL1 have.

In this post i will go through how to could get up and running with wsl in almost 5 minutes.

Table of content

Check that you OS meet the requirements.
Enabling WSL2 and Installing Linux Kernel. *Downloading and installing a Linux Distro.

Check that you OS meet the requirements

first make sure you have installed Windows 10 v2004 and the build you have is (OS Build 19041) to check it press (win-key + r) in keyboard the type winver.

then check your OS Build.

if your OS is not updated then you have to go settings and update it to the latest version.

Enabling WSL2 and Installing Linux Kernel

in this part we will enable WSL 2 and the virtualization platform and install the Linux Kernel in very easy steps.

Go to start and search for PowerShell and open it as admin.
Copy and paste this command in PowerShell to enable WSL Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux.
Restart you PC for the command to take Effect.
Open again PowerShell as admin and copy and paste those two commands to enable Virtaulization platform dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart and dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart.
Download the Linux Kernel from this URL and install it that simple !.
The last step is the set WSL 2 as the default by pasting this command wsl --set-default-version 2 into PowerShell PS (you should open Powershell as admin).

Downloading and installing a Linux Distro.

Know comes the fun part, Microsoft has make it very easy to install any Linux Distro easily from the Windows Store its even possile to install and run multiple Distros at the same time just go to Windows Store and type in search field Linux
All the available Linux Distro will show, there are free and payed linux distros for you to choose from.

I will choose and install Ubuntu.

after it done installing open it and new window will appear it will prompt with installing message let it finish, after that another prompt message appear asking you this time to provide a username and password fill the information

and there you have it you have successfully installed Ubuntu that runs on Real Linux Kernel.

If you have made it this far i'm glad that i have helped you to start learning or using Linux.

Conclusion

WSL 2 really leaves you with an amazing experience it is lighten fast compare to WSL 1 and run just like a real Linux OS but that comes with a hook and that is the high RAM consumption, I will create another post discussing this issue and how to solve it for low-end machines with gift on how to solve another issue again for low-end machines.

Please support me by liking this post and leaving a comment stay tuned for more posts about WSL2 cause i'm Loving it so far.

Why you should use vim as IDE

Kada Guetouache — Sun, 09 Feb 2020 13:45:39 +0000

vim is powerful text editor (like notepad in windows) that lives inside the terminal in any Linux distribution, and its a great tool for programmers that can make their live easier, vim is very customizable and extensible with plugins that adds all different types of functionality and give the user a lot amount of control that can transform vim from simple text editor to full IDE.

vim is so powerful bare bones not just when you start to add plugins to it, speaking of which before we dive any more deeper lets discuss very a important point.

there are two types of humans or programmers the ones that loves keyboard shortcuts and find them very helpful and accelerate their work and the one that find it very tedious and painful if you are in the second category then vim is not for you as it is heavly rely on keyboard shortcut to perform all types of action from moving cursor inside the text to copying saving and more and that is the strength of vim, but i still encourage you to read this post and give vim a try, but if you in the first category then i believe that vim will change your life in good way just like it did with mine.

Table of content

Brief History
Interface and Modes
Customization
Practice
Conclusion

Brief History

When Bram Moolenaar had bought an Amiga computer, he wanted to use the editor he learned on Unix. Since there was no good Vi for the Amiga, he started with the best that was available (a program called Stevie) and started improving it.

At first, his goal was to imitate Vi. Later new functionality was added, and by version 1.22 Vim included more features than Vi. That time it was renamed from Vi IMitation to Vi IMproved. Over time the gap has grown wider, now it’s hard to think of a reason to use Vi instead of Vim. I would recommend all Vi users to switch to Vim.

Of course, ports to various operating systems have been done by different people. The port to Unix was a milestone, since Vim started competing with Vi. Currently Vim runs on more than a dozen different operating systems. That is awesome indeed.

The first version of Vim that was released to the general public was 1.14, which was published on November 2, 1991. Over time Vim has grown constantly. It has become a complex program. Adding functionality is taking much more effort now than before.

Here’s the timeline of Vim development:

1988 Vim 1.0 Vi IMitation on the Amiga
1991 Vim 1.14 First public release (on Fred Fish disk #591)
1992 Vim 1.22 Port to Unix, renamed to Vi IMproved
1994 Vim 3.0 Multiple windows
1996 Vim 4.0 GUI
1998 Vim 5.0 Syntax highlighting
2001 Vim 6.0 Folding, multi-language
2006 Vim 7.0 On the fly spell checker, support for tabs

The list shows only the most important features, but each version brought us a lot of nice features. For example, if we take version 6.0: the major new feature was folding. But, there were other great features such as UTF-8 support, multi-language support (translated messages and menus), vertical window split, improved performance for syntax highlighting, etc.

Vim has grown to an big open source project, but it’s also important to mention that it’s charityware. The basic idea with charityware is that everybody who uses Vim is asked to donate to a charity. Thus the use of Vim is free, if you think it’s worth something, you can give that money to a good cause. Moolenaar helped with establishing a foundation called ICCF Holland that works to support to a children’s center in Uganda. Source jovicailic.org

Interface and Modes

Interface

Like i explained vim earlier heavely relays on keyboard shortcut in fact that's exactly the vim interface, vim is simple page text editor with no menus of icons just an empty bar on the bottom that show the vim commands you enter and some information about the file.

Vim Modes

Vim Comes with 12 modes 4 of which are basic and in fact all i have find my self using, in here we are going to explore the 4 basic modes only:

Normal Mode - this is the default mode when you open vim, and it is the editor command mode.
Insert Mode - in this mode buffer can be modified with text entered.
Visual Mode - similar to normal mode but used to highlight areas of text then execute commands on areas of text.
Select Mode - works similarly to visual mode however if your type a printable character them vim insert that character and start insert mode.

Customization

Vim allow three levels of customization the first one is per-user basis using the command mode in which when the text editor restarted the changes will be discarded the second one is to set configurations to system-wide using vim configuration file which will make the changes stay until you deside to remove them the last level is to add a different functionality to vim using plugins.

Practice

Here comes the fun part Yeah !, you can open vim (inside the terminal) by typing vi or vim then name of file you want to (optional) like so vi then press enter.
this screen means that you are inside vim.

now if you try to type anything nothing will happen and if you try to exist you don't know how a moment of panic indeed in fact we all have the same feeling using vim for the first time, the explanation is that you are now in command mode you can't type in this mode and to exit just type :q or :q! the second one means quite without saving any changes, if you ever want the type a command use : follow by the command wanted.

to actually start typing or edit a file type i to enter insert mode the type anything.

to save what you have edited in the buffer you must exit from insert mode to command mode by use C-c or control then c in keyboard then type :w for write then you can exit if you want.

navigation inside vim in command mode can be done either by arrow keys or h-j-k-l for left up down then right which is recommend, but in insert mode you have to use arrow key but that's not how we do it you should use command mode for navigation inside vim to get the most of its features.

Conclusion

Vim is a very powerful Linux text editor that lives inside the terminal which can be transformed into full IDE with any desired functionality, its highly loved in the developer community and it can make the life of programmer very ease, using vim at the beginning is very hard but as soon you get the hang you can't stop using it, like right now i'm using vim to edit this post.

DEV Community: Kada Guetouache

Master Modal, Tooltips and more with React createPortal

Understanding createPortal api

How it works

Creating and using portal

Conclusion

Understanding useRef: A Beginners Guide

Introduction

What is useRef

Why use useRef

Understanding the useRef hook

Creating a reference with useRef

Accessing the reference value

Common use cases for useRef

Directly accessing and manipulating DOM elements

Persistent Values

Performance Optimization

Best practices and considurations

Passing a ref to custom component.

Conclusion

Understanding `useMemo` and `useCallback`: A Comprehensive Guide

why should you use useMemo or useCallback

what is useMemo and how to use it.

useMemo usage

what is useCallback and how to use it.

When to use useMemo over useCallback

Skipping re-renders of a component

Conclusion

useReducer: Beyond useState for Complex State Logic

The benefits of useReducer hook.

Understanding useReducer.

Implementing useReducer logic.

Making state more complex

Conclusion

How to use the useTransition hook the improve performance in React

Understanding useTransition hook

Conclusion

React Context API: A Comprehensive Guide

Introduction

Why use React Context API

Understanding the basics

Creating a context

Creating a Provider

Consuming the provider

Enhancing Context API with custom react hook

Conclusion

Reusing Logic in React with Custom Hooks: a Practical guide

Understanding the basics

Creating a simple custom hook

Using custom hooks in components

Real world example of using custom hook

Conclusion

What is pnpm and why should you use it?

Getting Started with WSL 2 Part 2

Table of content

Getting familiar with wsl command on PowerShell.

Basic Commands

Setting up a config file for WSL.

Gift!.

The process.

Getting Started with WSL 2

Table of content

Check that you OS meet the requirements

Enabling WSL2 and Installing Linux Kernel

Downloading and installing a Linux Distro.

Conclusion

Why you should use vim as IDE

Table of content

Brief History

Interface and Modes

Interface

Vim Modes

Customization

Practice

Conclusion

What is `useRef`

Why use `useRef`

Understanding the `useRef` hook

Creating a reference with `useRef`

Common use cases for `useRef`

Directly accessing and manipulating `DOM` elements

why should you use `useMemo` or `useCallback`

what is `useMemo` and how to use it.

`useMemo` usage

what is `useCallback` and how to use it.

When to use `useMemo` over `useCallback`

Getting familiar with `wsl` command on PowerShell.