DEV Community: JOHNATAN STEVEN ORTIZ SALAZAR

useEffect React and TypeScript

JOHNATAN STEVEN ORTIZ SALAZAR — Mon, 10 Jun 2024 18:00:08 +0000

React + Typescript

Using useEffect in a React component with TypeScript involves ensuring that your effect functions, dependencies, and cleanup functions are properly typed. Here’s how you can do this:

Basic Example

Here's a simple example of using useEffect with TypeScript:

tsxCopy code
import React, { useEffect, useState } from 'react';

const MyComponent: React.FC = () => {
  const [data, setData] = useState<string | null>(null);

  useEffect(() => {
    // Fetching data
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));

    // Cleanup (if necessary)
    return () => {
      console.log('Cleanup if necessary');
    };
  }, []); // Dependency array

  return <div>Data: {data}</div>;
};

export default MyComponent;

Typing the State

When using state, you need to specify the type of the state variable. In the example above, useState<string | null> specifies that the state can be a string or null.

Example with Dependencies

If you have dependencies, you should also type them:

tsxCopy code
import React, { useEffect, useState } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]); // Re-run the effect only if count changes

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default MyComponent;

Cleanup Function

Here’s an example with a cleanup function, typically used for subscriptions or timers:

tsxCopy code
import React, { useEffect, useState } from 'react';

const TimerComponent: React.FC = () => {
  const [seconds, setSeconds] = useState<number>(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, []); // Run once on mount and cleanup on unmount

  return <div>Seconds: {seconds}</div>;
};

export default TimerComponent;

Fetching Data with TypeScript

For data fetching, you can define the type of the data you expect:

tsxCopy code
import React, { useEffect, useState } from 'react';

interface Data {
  id: number;
  name: string;
}

const FetchDataComponent: React.FC = () => {
  const [data, setData] = useState<Data | null>(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then((data: Data) => setData(data))
      .catch(error => console.error(error));

    return () => {
      // Any necessary cleanup
    };
  }, []); // Empty dependency array ensures this runs once on mount

  return <div>{data ? `Name: ${data.name}` : 'Loading...'}</div>;
};

export default FetchDataComponent;

Handling Subscriptions

If you’re dealing with subscriptions, you can type the cleanup function appropriately:

tsxCopy code
import React, { useEffect, useState } from 'react';

const SubscriptionComponent: React.FC = () => {
  const [message, setMessage] = useState<string>('');

  useEffect(() => {
    const subscription = subscribeToMessages((newMessage: string) => {
      setMessage(newMessage);
    });

    return () => {
      subscription.unsubscribe();
    };
  }, []); // Empty array ensures the effect runs only once

  return <div>Message: {message}</div>;
};

function subscribeToMessages(callback: (message: string) => void) {
  // Dummy subscription function
  const interval = setInterval(() => {
    callback('New message received');
  }, 1000);

  return {
    unsubscribe: () => clearInterval(interval),
  };
}

export default SubscriptionComponent;

Summary

Type the state variables: Ensure that the state types are correctly defined.
Type the data: When fetching data, define the type of the data you expect to receive.
Type the cleanup function: Ensure that any cleanup functions are typed correctly.

By following these guidelines, you can effectively use useEffect in your TypeScript React components.

How to unlock the limitations of Notion

JOHNATAN STEVEN ORTIZ SALAZAR — Wed, 05 Jun 2024 23:31:02 +0000

Notion rich_text limitations - node client

Notion has undoubtedly gained popularity as a versatile productivity and organization platform. Its ability to create documents, databases, boards, and more, all in one place, has attracted a wide range of users, from students to business professionals. However, like any tool, Notion also has its limitations, especially when it comes to its API and handling rich_text.

What is rich_text in Notion?

Before diving into the limitations, it's essential to understand what rich_text in Notion is exactly. In simple terms, rich_text refers to the rich text formatting that can be used within Notion. This includes styles such as bold, italic, strikethrough, numbered and bulleted lists, as well as links and mentions to other pages.

What are the principal limitation

One of the primary limitations of the Notion API is its restriction on the maximum number of characters that can be processed in a single request. Presently, the Notion API accepts a maximum of 2000 characters per request. This constraint poses a significant challenge for developers working with large bodies of text or intricate data structures within the Notion platform.

Property value type	Inner property	Size limit
https://developers.notion.com/reference/rich-text	text.content	2000 characters
https://developers.notion.com/reference/rich-text	text.link.url	2000 characters
https://developers.notion.com/reference/rich-text	equation.expression	1000 characters

Solution for mitigate the notion API limits

The most effective solution for mitigating the limitations imposed by the Notion API's character restriction is to segment the content into smaller chunks of 2000 characters or less. By breaking down the text content into manageable chunks.

Example:

This is the typical way a page would be added:

const page = await notion.pages.create({

parent: { database_id: databaseId },
      properties: {
        nameOfColumn: {
          rich_text: [
            {
              type: 'text',
              text: {
                content: 'This is a long text...'
              }
            }
          ]
       },
    }
});

This is the way that we need to insert the page with the long text inside

function splitTextIntoChunks(text: string, chunkSize: number) {
  const chunks = [];
  for (let i = 0; i < text.length; i += chunkSize) {
    chunks.push(text.slice(i, i + chunkSize));
  }
  return chunks;
}

const chunks = splitTextIntoChunks('This is a long text...', 2000);

const page = await notion.pages.create({

parent: { database_id: databaseId },
      properties: {
        nameOfColumn: {
         rich_text: chunks.map(chunk => ({
            type: 'text',
            text: {
              content: chunk
            }
          }))
       },
    }
});

Implementing this approach ensures efficient data transmission within the constraints of the Notion API, facilitating seamless integration and manipulation of content.

How to use Notion as a backend in a project using Next.js

JOHNATAN STEVEN ORTIZ SALAZAR — Tue, 04 Jun 2024 20:56:24 +0000

How to use Notion as backend

In the world of web development, the choice of backend is crucial for the functioning and scalability of an application. However, what if we could harness the capabilities of a versatile tool like Notion as the backend for our applications? In this article, we will explore how we can integrate Notion as the backend in Next.js, a combination that offers flexibility, ease of use, and creative potential for web projects.

Why Notion and Next.js?

Notion: Notion is an all-in-one platform that allows creating documents, databases, wikis, and more, all in one place. Its intuitive interface and powerful features make it an attractive option for managing content.
Next.js: Next.js is a React framework that allows building fast and scalable web applications with ease. Its focus on server-side rendering and static page generation makes it a popular choice for modern web projects.

Steps to incorporate Notion as Backend in Next.js:

1. Step 1: Notion Setup:

Create an account on Notion if you haven't already.
Create a database in Notion to store your application data.
Define database properties according to your application needs, such as text, numbers, options, etc.

2. Step 2: Notion API Setup:

Access the Notion developer area and create an integration for your application.
Get your Notion integration token, which will be used to authenticate requests to the API.

3. Step 3: Next.js Project Setup:

Create a new Next.js project using the Next.js CLI or your preferred method.
Install necessary dependencies to make requests to the Notion API, such as axios or another similar library.

4. Step 4: Integration with Notion API:

Use the Notion integration token to make requests to the API and fetch or modify data in your database.
Implement functions in your Next.js project to perform CRUD (Create, Read, Update, Delete) operations on the Notion database as needed.

5. Step 5: Data Consumption in Next.js:

Utilize data obtained from Notion to render dynamic content on your Next.js pages.
Design and style your React components using data retrieved from Notion to create an engaging user experience.

Conclusion:

The combination of Notion as the backend and Next.js as the frontend offers a powerful and flexible way to build modern web applications. By leveraging Notion's capabilities to manage data and content, along with the speed and scalability of Next.js, developers can efficiently and effectively create sophisticated digital experiences. By following the steps mentioned above, you can incorporate Notion as the backend into your Next.js projects and unlock a new level of creativity and functionality in your web applications. Start experimenting today!