DEV Community: Itay Schechner

You MUST use the useCallback hook!

Itay Schechner — Thu, 30 Sep 2021 16:52:15 +0000

Hi everyone! My name is Itay and I’m a fullstack developer who specializes in back-of-the-frontend React.js code.

In this shot, I’ll show you the usages of the useCallback hook for better performance of your application, and explain why you should use it.

For a start, let’s look at this code:

export function MyComponent () {
    const [numericState, setNumber] = useState(0);
    const handleClick = () => {
        setNumber(x => x%2 +1);
    }
    return (
        <>
        <button onClick={handleClick}>Click Me</button>
        {numbericState}
        </>
    )
}

What’s wrong with this code? It’s not completely optimized. The handle click function is changing on every render!

That would be the equivalent of writing the following class based component:

export default class MyComponent extends React.Component {
  state: {
    numericState: 0
  }
  render() {
    const handleClick = () => {
        this.setState(({ numericState }) => ({ numericState: numericState%2 +1 }));
    }
    return (
        <>
          <button onClick={handleClick}>Click Me</button>
          {this.state.numbericState}
        </>
    )
  }
}

This, of course, is ridiculous. A better practice would be to write your class-based component in the following way:

export default class MyComponent extends React.Component {
  state: {
    numericState: 0
  }
  handleClick = () => {
    this.setState(({ numericState }) => ({ numericState: numericState%2 +1 }));
  }
  render() {
    return (
        <>
          <button onClick={this.handleClick}>Click Me</button>
          {this.state.numbericState}
        </>
    )
  }
}

The question is, how to you write it in a functional approach? This is what hooks are made for. Let’s see how we can write the functional component in an optimized way:

export function MyComponent () {
    const [numericState, setNumber] = useState(0);
    const handleClick = useCallback(() => {
        setNumber(x => x%2 +1);
    }, []); // works exactly like useEffect
    return (
        <>
        <button onClick={handleClick}>Click Me</button>
        {numbericState}
        </>
    )
}

REMEMBER: Not using the useCallback hook = writing everything in you render function!

You can see a complex back-of-the-frontend React.js app I've recently built here

Using Modals In React.js, The Right Way (ZERO prop drilling)

Itay Schechner — Wed, 01 Sep 2021 17:04:04 +0000

What if controlling a modal was easy as writing the following effect:

const someModal = useModal()

useEffect(() => {
  if (someModal.isOpen) {
    setTimeout(someModal.close, 1000)
  }
}, [someModal])

My name is Itay Schechner, and I’m a growing fullstack develoepr who specializes in back-of-the-frontend code, particularly in React.js.

In this article, I’ll teach you how to write readable, reusable modal utilities.

NOTE: This article is heavily based on a previous post I wrote, explaining usage of the Context API in detail.

What you’ll learn today:

usages of the useModal hook
The modal component factory
Writing readable code with modal factories.

The Modal Hook

Let’s start with some TypeScript:

export interface Modal {
  isOpen: boolean;
  open(): void;
  close(): void;
}

From that, we understand that each modal will be able to open itself, close itself and “tell” the components and hooks using it if it’s open or not. This hook is relatively easy to implement:

export default function useModal(): Modal {
  const [isOpen, setOpen] = useState(false);
  return {
    isOpen,
    open() {
      setOpen(true);
    },
    close() {
      setOpen(false);
    },
  };
}

You can implement modal logic by using this hook in one of your components, and using a lot of prop drilling. For example:

export default function Navbar ()  {
    const { isOpen, open, close } = useModal();
    return (
        <nav>
         // ...navigation code
         { isOpen && <Modal close={close} /> }
         <button onClick={open}>Open Modal</button>
        </nav>
    )
}

Because we are so used to writing components this way, we don’t recognize the full potential of modals. What if the exports of your modal file would look like this:

import LoginModal, { LoginModalOpener } from '../auth/LoginModal';

The Modal Factory

Unlike previous component factories we discussed, this factory will be much more complicated.

Let’s start, again, with some TypeScript, to see the requirements of this factory.

export function createModal<T extends object>(
  context: Context<T>,
  name: keyof T,
  openerLabel: string
) { ... }

What do we understand from that?

The function will take a Modal typed field in the context provided, and use it to create the modal
The function takes an openerLabel field, meaning it will create the opener button as well.
If we provided an opener, we should be able to provide a closer as well. I want my closer to display an x icon instead of a text, so I’ll upgrade my context action factory first.

type JSXProvider<Props> = (props: Props) => JSX.Element;

export function action<T extends object, Props extends object = {}>(
  label: string | JSXProvider<Props>, 
  context: React.Context<T>,
  consumer: (ctx: T) => void,
) {
  return function ContextAction({ className, ...props }: withClass & Props) {
    const ctx = useContext(context);
    const action = useCallback(() => consumer(ctx), [ctx]);
    return (
      <button onClick={action} className={className}>
        {typeof label === 'string' ? label : label(props as unknown as Props)}
      </button>
    );
  };
}

Now, we can write our modal factory:

export function createModal<T extends object>(
  context: Context<T>,
  name: keyof T,
  openerLabel: string
) {
  return {
    Visible: createWrapper(
      context,
      ctx => (ctx[name] as unknown as ModalHook).isOpen
    ),
    Opener: action(openerLabel, context, ctx =>
      (ctx[name] as unknown as Modal).open()
    ),
    // Clear: A JSXProvider that takes width and height props
    Closer: action(Clear, context, ctx => 
      (ctx[name] as unknown as Modal).close()
    ),
  };
}

Let’s see how we can use this factory to create clean code. In the example I’ll show you, I will create a Login modal in an authentication context, that is provided for the entire application in the App.tsx file.

// AuthContext.tsx
export default function AuthContextProvider({ children }: Wrapper) {
  // other auth state ommited for bravety
  const loginModal = useModal();

  // effects ommitted for bravety

  return (
    <AuthContextProvider value={{ loginModal, ...anything }}>{ children }</AuthContextProvider>
  )
} 

// LoginModal.tsx

const ModalProvider = createModal(AuthContext, 'loginModal', 'Log In');

export const LoginModalOpener = ModalProvider.Opener;

export default function LoginModal() {
    return (
        <ModalProvider.Visible> // modal is hidden when hook state is hidden
            // Modal UI (i.e dark fixed background, white modal)
            <ModalProvider.Closer />
            <div>
                // form ommited for bravety
            </div>
        </ModalProvider.Visible>
    )
}

// App.tsx

export default function App () {
    return (
        <AuthContextProvider>
            <LoginModal />
            <Navbar />
            // rest of application
        </AuthContextProvider>
    )
}

Now, let’s see how SIMPLE our Navbar component becomes:

import { LoginModalOpener } from '../auth/LoginModal';

export default function Navbar () {
    return (
        // ... links ommited for bravety
        <LoginModalOpener />
    )
}

Wrapping up

If you think I made a mistake or I could write the post better, please make suggestions.

A project where I used this -

itays123 / partydeck

A cool online card game!

Using Forms In React.js, The Right Way (no library needed)

Itay Schechner — Thu, 19 Aug 2021 14:16:21 +0000

TL;DR

In order to create composable, reusable and readable components, we use component factories that take advantage of TypeScript and the Context API.
Combining context wrappers, context actions and context form inputs will enhance the readability and reusability of your code by a mile.

Introduction

What if you could create form utilities that are so modular and reusable, that all you need to compose a signup form from the components of a login form is to define you want the email to be unique!

What if you could create extremely readable components that you can spend hours looking at?

What if anyone reading your component could immediately see in their imagination how it looks like on the web?

Check out the example below:

My name is Itay and I’m a frontend developer who specializes in back-of-the-frontend code, particularly in React.js.

In this article, I’m going to describe my approach for writing form logic in react. Even if you decide to adopt some of it to your codebase, I guarantee it will be much cleaner.

NOTE: This post is heavily based on subjects I wrote about in my previous post, and it uses context logical wrappers and actions.

In this post, you’ll learn about:

The useField hook
Form stages and form input factories.

In the end, I’ll show you a detailed authentication form example.

The Field Hook

Let’s start with some TypeScript:

We can now use this those types to create our custom hook. From the type definition, we understand the functionality of this hook:

the hook will manage the field state
the hook is responsible for showing the errors and providing a method to show them. From that, we understand that the hook will consist of an error visiblity state as well.
the hook provides no method to hide the errors, meaning it should take care of that on its own.

Let’s see what we can build with that:

If you take this hook and use it in your apps, it will already be a lot easier for you. However, I want to show you how to take your forms to the next level with form input factories and form stages.

Form Input Factories

A kind reminder:

A component factory is a function that returns a functional component. It defers from HOC by not taking a component in the arguments.

Let's start, again, with some TypeScript:

Now that we understand the parameters, let's write the factory. I want to have a way to override the label and the hint when needed.

You can then create a custom context that contains the fields for you form, and let the context wire the logic for everything.

Note that you can add more fields to the form (such as name), and not render their input in the login form but do render them in the signup form - and everything would still work exactly as expected

Let's create out fields:

Form Stages

A form stage is anything that happens while filling out the form, and you don’t know how much time it will take.

Form stages consist of those two types:

A user filling an input field
Async validations of the values in the form. For example - validating your email and password on login.

I highly recommend storing your stages in a TypeScript enum, like the example below, and then create logical wrappers to toggle between the stages. Let’s see how it can supercharge our codebase and make it extremely readable.

You can now use form stages to conditionally render Loading messages, or hide inputs that aren’t required in the current phase of the form, creating a “flow” for the users filling out the form.

Let's see the full logic behind the Auth Form Context:

In one of my projects, I created a much more complex authentication form with name and password confirm fields, but the reusability features saved me a lot of time doing that!

Enchancements

If you wanted to, you could also create a passwordVisible boolean value and compose a conditional warpper out of it, creating the visibility option for your password input field.

Something like:

You can also upgrade the context action factory, providing a disabledConsumer argument to disable the button when values aren’t validated.

Check out a cool usage in my project:

itays123 / partydeck

A cool online card game!

Using the React Context API, the right way (a time saver)

Itay Schechner — Thu, 05 Aug 2021 14:47:00 +0000

Hey everyone! I'm Itay, a fullstack web developer who specializes in back-of-the-frontend code, particularly with React.js. Today, I'll teach you useful code hacks to supercharge your codebase.

What you'll learn

The flaws of the context API
The logical wrapper factory
The action factory

Before We Begin

I want to introduce my common way of writing context providers, so that I can write custom components and hooks and the you‘ll understand their meaning without me having to explain too much. If you want me to do a more simple context tutorial in the future, let me know in the comments.

The Flaws of the context API

The Context API is the state-of-the-art way to manage state in React. It is an alternative to Redux, MobX, and a large variety of state management libraries made by the community.

Repetitive Tasks

Almost every time I use the Context API in a frontend application, I run into doing the exact same thing: I create an AuthContext, like the one below:

Then, I use the signed in state anywhere in my app:

Imagine having 60 auth-protected component in your app. Your codebase would be a mess!

What are the problems with this approach?

Messy code
Repeating a lot of code all the time

Easy to mess up your codebase

Suppose you have a context and a ContextProvider component attached to it.

In the same component you provided the context, you want to use the context for a button, like the example below:

You wanted to do something really simple, but ended up messing up your codebase. As a workaround, you might do something like this:

But now, we are back in the repetitive tasks zone.

Component Factories to the rescue

A component factory is a function that returns a React functional component.
I. e: () => () => <div></div>

We can use component factories to clean up our codebase and create a clean code structure. Today, I will teach you about 2 time-saving and life-saving factories: The context logical wrapper and the context action factory.

Logical Wrappers

Logical Wrappers solve the problems of conditional rendering we saw in the beginning, without having to mess up your codebase. You create them with this function:

Then, our problem from before can be solved in just a few lines of code:

You can save tons of time by using this component factory for every context you create.

Context actions

Context actions are high-reusable components because of the way they are built.

Now, we can create out ComponentB with just one line of code!

Now you must ask yourselves - why would you add the className prop to your context action? The reason is simple: Reusability. The best way to demonstrate it is by example:

Wrapping up

Do you want to see how to add icons to our action buttons? How to use TypeScript with those? Let me know in the comments below.

In the next episode, we'll discuss supercharging forms with react! Give me a follow if you want to see this.

See component factories in action (at branch 1.1.2):

itays123 / partydeck

A cool online card game!

Using WebSockets with React.js, the right way (no library needed)

Itay Schechner — Thu, 29 Jul 2021 10:17:08 +0000

TL;DR

In this post I introduce useful custom React.js hooks that take websocket clients to the next level.

Introduction

In the project I'm currently working on, I have a React.js frontend and a WebSocket server that need to be connected. I spent weeks trying to figure out the best way to use websockets, and I wanted the share the things I learned here.

The code solutions I introduce:

Why using the useReducer() hook when working with WebSockets?
My custom useSession() hook
My usage of the useCallback() hook.
Auto-reconnect features with the custom useDisconnectionHandler() hook. Bonus: Auto-reconnect on page refresh when needed.

The useReducer hook

When I first tried to implement my state management system and update it properly when a message was received, it was a disaster.

My GameContextProvider component, responsible for handling such events, looked like this:



// GameContextProvider.js

const GameContextProvider = ({ children }) => {
  const [isStarted, setStarted] = useState(false);
  const [isConnected, setConnected] = useState(false);
  const [isJudge, setIsJudge] = useState(false);
  const [judge, setJudge] = useState('');
  const [question, setQuestion] = useState('');
  const [deck, setDeck] = useState([]);
  const [showEndScreen, setEndScreenShown] = useState(false);
  const [scoreboard, setScoreboard] = useState([]);
  ........ 
  // Much more state!
  .....
}

Then, when I wanted to handle websocket messages, the handler looked like this:



// GameContextProvider.js

const onMessage = (ev) => {
  const data = JSON.parse(ev.data); 
  if (data.question) { // a round is started
    setJudge(data.judge);
    setIsJudge(data.isJudge);
    setQuestion(data.question);
  }
   ...... // super long, unreadable message handler
}

The Solution

I attached a 'context' string to each of my messages in the server, and used this string to dispatch an action in the useReducer hook.
For example, I had a 'JOINED' context, 'GAME_STARTED', 'ROUND_STARTED', 'GAME_ENDED', etc...

then, my GameContextProvider looked like this:



// GameContextProvider.js
const [state, dispatch] = useReducer(reducer, initialState);

const onMessage = (ev) => {
  const data = JSON.parse(ev.data); 
  if (data.context) 
    dispatch({ type: data.context, payload: data })
}

Simple and clean!

In addition, this follows the single responsibility rule. Now the component's responsibility was to wire the state and the websocket technology for the rest of the application to use.

The useSession hook

Before I splitted the WebSocket utilities to a custom hook, my context provider had a messy, unreadable code that took care of the websocket events.



// GameContextProvider.js
const [ws, setWebsocket] = useState(null)
const join = (gameCode, name) => {
  const URL = `${process.env.REACT_APP_WS_URL}?code=${gameCode}&name=${name}`
  setWebsocket(() => {
    const ws = new WebSocket(URL);
    ws.onmessage = onMessage;
    ws.onclose = () => {
      dispatch({ type: 'DISCONNECTED' })
    };
    return ws;
  })
}

On the surface, this approach looks OK.
but what if I wanted to check the game state on disconnection? If I was to register the function as is, when the value of the state updates, the function would not update!

The Solution

I created a custom hook that handled the websocket utilities. (Note - by that time I refactored my project to TypeScript)



// websocketUtils.ts

export const useSession = (
  onOpen: OpenHandler, 
  onMessage: MessageHandler, 
  onClose: CloseHandler
): SessionHook => {
  const [session, setSession] = useState(null as unkown as Websocket);
  const updateOpenHandler = () => {
    if (!session) return;
    session.addEventListener('open', onOpen);
    return () => {
      session.removeEventListener('open', onOpen);
    };
  };

  const updateMessageHandler = () => {
    if (!session) return;
    session.addEventListener('message', onMessage);
    return () => {
      session.removeEventListener('message', onMessage);
    };
  };

  const updateCloseHandler = () => {
    if (!session) return;
    session.addEventListener('close', onClose);
    return () => {
      session.removeEventListener('close', onClose);
    };
  };

  useEffect(updateOpenHandler, [session, onOpen]);
  useEffect(updateMessageHandler, [session, onMessage]);
  useEffect(updateCloseHandler, [session, onClose]);

   .... // connect, sendMessage utils
}

This was great! But for some reason, the website's performance was decreased dramatically.

The useCallback hook

To be honest, I had no idea how this hook worked until last week, when I finally figured out the solution.
As it turns out, my open, message, and close handlers were updated on every re-render of the app (!), meaning a few times per second.

When I debugged the application, I tried to test out the affect of the useCallback hook at my performance. as it turned out, the callback hook was only updating the function when one of its dependencies changed, meaning once in minutes!

This improved the performance of my application dramatically.



// GameContextProvider.tsx
const disconnectHandler = useCallback(() => {
  if (state.gameStatus !== GameLifecycle.STOPPED) // unexpected disconnection!
    console.log('unexpected disconnection')
}, [state.gameStatus])

My Custom disconnection handler hook

In the current version of my project, I wanted to develop a feature - on unexpected disconnection, try to reconnect!

I made the changes to my API and was ready to implement them in my React.js client.

As it turned out, this is possible:



// eventHandlers.ts
export const useConnectionPauseHandler(
  state: IGameData,
  dispatch: React.Dispatch<any>
) => {
  const [connectFn, setConnectFn] = useState<ConnectFN>(
    null as unknown as ConnectFN
  );

  const disconnectCallback = useCallback(() => {
    if (state.connectionStatus !== ConnectionLifecycle.RESUMED)
      dispatch({ type: 'DISCONNECTED' });
  }, [dispatch, state.connectionStatus]);

  const pauseCallback = useCallback(() => {
    if (...) {
      // disconnection is expected, or an error is prevting the connection from reconnecting
      console.log('expected disconnection');
      dispatch({ type: 'DISCONNECTED' });
    } else if (...) {
      // connection is unexpected, and not attempting reconnection
      console.log('unexpected disconnection');
      dispatch('SESSION_PAUSED');
      if (connectFn) connectFn(state.gameCode!, null, state.playerId);
      setTimeout(disconnectCallback, 30 * 1000);
    }
  }, [
    disconnectCallback,
    dispatch,
    connectFn,
    state.gameCode,
    state.playerId,
    state.connectionStatus,
    state.gameStatus,
  ]);

  const registerConnectFunction = useCallback((fn: ConnectFN) => {
    setConnectFn(() => fn); // do this to avoid confusing the react dispatch function
  }, []);

  return [registerConnectFunction, pauseCallback];
}

// GameContextProvider.tsx
  const [setConnectFn, onClose] = useConnectionPauseHandler(state, dispatch);
  const [connect, sendMessage] = useSession(
    onOpen,
    onMessage,
    onClose
  );

  useEffect(() => {
    console.log('wiring everything...');
    setConnectFn(connect);
  }, [setConnectFn, connect]);

The feature worked like magic.

Bonus

This is a component that saved the connection credentials if the page is refreshed. Can you figure out a way to refactor it to hooks?



export default class LocalStorageConnectionRestorer extends Component<Wrapper> {
  static contextType = GameContext;
  state = { isReady: false };
  saveValuesBeforeUnload = () => {
    const { connectionStatus, showEndScreen, gameCode, playerId, close } =
      this.context;
    if (connectionStatus === ConnectionLifecycle.RESUMED && !showEndScreen) {
      // going away before game is over
      console.log('saving reconnection before unmount', gameCode, playerId);
      LocalStorageUtils.setValues(gameCode!, playerId!);
      close();
    }
  };
  componentDidMount() {
    const [gameCode, playerId] = LocalStorageUtils.getValues();
    if (gameCode && playerId) {
      console.log('attempting reconnection after render');
      this.context.reconnect(gameCode, playerId);
      LocalStorageUtils.deleteValues();
    }
    this.setState({ isReady: true });
    window.addEventListener('beforeunload', this.saveValuesBeforeUnload);
  }
  componentWillUnmount() {
    window.removeEventListener('beforeunload', this.saveValuesBeforeUnload);
  }
  render() {
    return this.state.isReady ? (
      this.props.children
    ) : (
      <div className="flex items-center justify-center">Loading...</div>
    );
  }
}

View The Full Source Code

itays123 / partydeck

A cool online card game!

How Can a Programmer Design a Website? (That is actually good)

Itay Schechner — Mon, 19 Jul 2021 14:01:57 +0000

As a web developer, the #1 topic I've been struggling with is designing. I managed to master HTML\CSS, React.js, Node.js, TypeScript, Java and Spring Boot but something about my websites always felt wrong.

As I began working on my big project called Partydeck, this issue became a real struggle.

This is the homepage I had designed last March. It looks clean, the theme is clear, and it's easy to understand what the user is expected to do. Yet, something is missing.

This is the homepage I am currently designing. You can see it is in a whole new level, containing colorful interfaces and is able to keep the user's eyes hooked for a longer time.

What to do?

Here are some of the tips I found the most inspiring and that have helped me the most. Do you have any other good tips? Let me know in the comments!

Use a designing software

The reason this is so important is because it's much more easy to experiment and see what works best when you design your website in an external software before actually programming it.

You don't have to master Photoshop or be the best Adobe user on the planet, just have the minimal understanding of the software of your choice.

My personal preference is Figma, because... it's made of React.js, which I absolutely love.

A great example of the usage of Figma for designing websites can be found in this video:

Get Inspired

If you design a To-Do app, get to Todoist, Any.do or any other website with a purpose close to yours and get inspired by their design.

In my case, my website is similar to Quizlet and Kahoot, so I visited their websites many times to get inspired.

Don't be afraid to use colors

The only website I have ever seen with an almost 100% monochromatic UI is Instagram, and the reason it looks good is because the posts are the ones who keep the user's eyes hooked. Unless you design a social media application, use a color theme.

I don't want you to pick an exact shade, but a color from a pre-made theme such as the Material color theme.

Once you have a color theme, here's what you do:

What is your primary color? Use it for ~60% of your interface. In my case - the Tailwind.css indigo.
The secondary color should be similar to the primary, but a bit lighter or darker. You can use different shades of the same color to spice things up.
What are your accent colors? Picking one is interesting, but in the context of my application I thought I should pick more. Use it in unexpected locations.

A great usage of color themes can be found in the Quizlet website

About Me And My Project

Last October, My friend gave me an excellent app idea. I decided to develop it and gained tond of experience regarding app development, project management and product design. I'm planning on posting a lot about this topic later on.

Check out my project -

itays123 / partydeck

A cool online card game!

Partydeck - A cool online card game

The Partydeck app contains 3 microservices, all connected:

The live server, responsible for creating live games, shufling the cards and generating game codes. Powered by Java and the Spring framework.
The live game, the fronend React.js app that connects to the live server.
The game panel, a traditional MERN application to store and manage decks.

The application's microservices architecture is described in the following chart:

Want to give it a try?

Go to the game panel url: https://partydeck-game-panel-iygnk5fpxq-ue.a.run.app
Sign up and create a game (or choose one from the public library)
Click 'play' to create a live game
Invite your friends to play

License

This software has no open-srouce license, which means the default copyright laws apply to it. Under Github's terms of service, you can view and fork the code for this repository for private use.

For more information…

View on GitHub