DEV Community: ARiyou Jahan

Convert and Execute JS code as React Component

ARiyou Jahan — Thu, 08 Dec 2022 14:12:35 +0000

Before going any further know that this post consist of two part: Why do this? and How do this?
Since i am writing this post as an supplementary post of my other post (NextJS - Access window and localStorage) i'm going to first explain How and then Why

How

Create a component that contains only logic and return no JSX. In other word all logic and no view(UI):

Following example will log a message in console when it's called

const ConsoleLogger = () => {
  console.log("Hello World");
  return null; // return value must be JSX (our UI or view) that is null.
};

export default ConsoleLogger;

You can even pass a message to print:

const ConsoleLogger = ({massage}) => {
  console.log(massage);
  return null; // return value must be JSX (our UI or view) that is null.
};

export default ConsoleLogger;

Now lets take it a step further and take advantage of react features such as useEffect hook and do some practical things.

Following example shows how to subscribe an EventListener to our browser window object:

// components/Scroll.js

import { useEffect } from "react";

const Scroll = () => {

  useEffect(() => {
    indow.addEventListener("scroll", () => { console.log("scroll!"); });
  }, []); // empty dependencies array means "run this once on first mount"

  return null; // it render nothing in page and only runs logics
};

export default Scroll;

Now need to add this component to your React Component Tree

// pages/index.js

import Scroll from "../components/Scroll";

const Home = () => (
  <div style={{ minHeight: "1000px" }}>
    <h1>Home</h1>
    <Scroll />
    <ConsoleLogger massage="Hello World" />
  </div>
);

export default Home;

Note: We used useEffect hook because some time (e.g. using Frameworks such as Next.JS and SSR (Server-Side Rendering)) you do not have access to document or window properties such as local storage (Read more here!). And you need to run such a code in run-time(rendering phase) and useEffect hook will do so.

Why

There are instance that you need to run an JavaScript statement that rely on React features.
You might wondering why you need to change your code and not just using it in relevant components?
But what if there is no logical relation between them? For example Subscribing(registering) an EventListener such as a "Scroll" event to your window object?

As you can see this is not relevant to any component and it's a operation that apply globally with no dependency.

Or in some instance you want to simple change the way your code looks (calling it like React Components instead of calling a function)

const Home = () => (
  <div>
    <h1>Home</h1>

    <SubToScroll /> vs {SubToScroll()}

  </div>
);

export default Home;

Note: Make JavaScript logic Independent to components
useEffect is a hook and it must be used in functional components.
But at the same time, it's wrong for our JS codes that are unrelated to a specific component to depend on them.
And it's also wrong to have duplicated statements all over our code.
So we have two options:

Create global functions and export them.
turn our initial JavaScript file into a true React component

Solution No. 1 is simple and it has its own downsides such as being unable to use or hard implementation of react hooks and etc.
So we recommend running your JS logical code as a react component.

NextJS - Access window and localStorage

ARiyou Jahan — Fri, 02 Dec 2022 20:16:40 +0000

Next.js is a React framework with pre-rendering abilities. This means that for every page, Next.js will try to generate the HTML of the page for better SEO and performance.

Window and document are unavailable on the server. So you'll run into errors such as ReferenceError: window is not defined if you are trying to access document or window properties such as local storage.

To avoid these undefined errors at compile and build time, you have different options.

A.1 - Run Only for browser users

You can run a simple check, and only if a user is a browser user run your code. This way server will not take your code into consideration.
Since process.browser is deprecated you must use typeof window.



if (typeof window !== "undefined") {
  // Write your client-side statements here.
  window.localStorage.getItem("key");
  window.localStorage.setItem("key", "value");
}

Note: this is good way if you want to do simple operations and other variables in other components do not depend on this value or you will get error such as "can not read the property of undefined". If your code do so or you have many similar operation in your code, Look for solution "A.2".

A.2 - Actual window & dummy window (Recommended):

"A.1" is good and it'll work, but you need to explicitly check if it is a client-side rendered component or server-side every time.

To avoid this issue you need to create an mock window object.
then use mock window for server-side logic and actual window for client-side.



let WINDOW = {};

if (typeof window !== "undefined") {
  // When code is on client-side. So we need to use actual methods and data.
  WINDOW = window;
} else {
  // When code is on server-side.

  // Other component are mostly server-side and need to match their logic and check their variable with other server-side components and logics.
  // So following code will be use for them to pass the logic checking.
  WINDOW = {
    document: {
      location: {},
    },
    localStorage: {
      getItem :() => {},
      setItem :() => {}
    },
  };
}

export default WINDOW;

Note that: Depending on what property of window, document,... or what methods of those property you have used, your implementation details will be different.

Now use WINDOW instead of window in your code:



  WINDOW.localStorage.getItem("key");
  WINDOW.localStorage.setItem("key", "value");

Example of use:

I created a custom hook for using local storage:



export const useLocalStorage = (key) => {
  // returns value related to initial key.
  const item = WINDOW.localStorage.getItem(key);
  // return an function that will save given value to initial key
  const setItem = (value) => WINDOW.localStorage.setItem(key, value);
  return [item, setItem];
};

Warning:

remember, never create a function for window type checking.
it always must be an explicit type checking or it will not work

Wrong way:



const hasWindow = () => {
    return typeof window !== "undefined"
}

if (hasWindow()) {
    // client-side operation such as local storage.
    localStorage.setItem(key, value)
}

if (!hasWindow()) {
    // server-side code
}

read more and reason for this problem: NextJS GitHub issues page

B - EventListener and useEffect hook

If you are simply registering EventListener such as a "Scroll" event to your window object there is no need to go through all these troubles.
The React way to solve this issue would be to use the useEffect hook. Which only runs at the rendering phase, so it won't run on the server.



useEffect(() => {
  window.addEventListener("scroll", () => { console.log("scroll!"); });
}, []); // empty dependencies array means "run this once on first mount"

Tip: The way you should use useEffect is to register and unregister the listeners on "mount"/"unmount". But you could also just register on "mount" and ignore any other rendering event, like what we did in the example.

Note: Make JavaScript logic Independent to components
useEffect is a hook and it must be used in functional components.
But at the same time, it's wrong for our JS codes that are unrelated to a specific component to depend on them.
Read more and solve this issue at:
Convert and Execute JS code as React Component

C - No Server Side Rendering

You can make it so your component won't even be rendered on the server-side at all.

This solution works particularly well when you're importing external modules depending on window.
But it is not recommended to use unless you really know what you are doing and using it at the right place. Because misuse of it makes your next project meaningless (You are not taking advantage of a core NextJS feature (SSR)).

Next.JS - Dynamic Import

40% of this post is thanks to these guys and a copy-paste of similar post written by them:
Ibrahim Adeniyi
Vincent Voyer