Forem: Dominik Biedebach

Why Discord Sucks for Developer Communities

Dominik Biedebach — Tue, 27 Jan 2026 18:40:24 +0000

Disclaimer: This post is not meant to talk bad about Discord. It's a great messenger app for casual groups and communities. This is a post with a POV of an open source library maintainer trying to figure out the right way to use it.

If you’re maintaining an open-source library or building a community around a project, you’re eventually going to look for a place for that community to live. I’ve spent the last few years navigating this as a core maintainer of Tiptap—an open-source framework for building rich text editors.

Four years ago, we thought Discord was the answer for the Tiptap community. Fast forward to today, and I’d honestly tell any maintainer to stay away.

Discord is Great for Chat, Terrible for Everything Else

Discord claims to be the best place for online communities. That’s probably true if you just want a closed-off corner of the web where people can chat about your project in real-time. If that’s all you need, you’ll be fine.

But if you have a real-world use case—like collecting feature requests, providing support, or building a searchable knowledge base—Discord is a significant hurdle.

Don’t get me wrong: as an app for real-time messaging, voice rooms, and screensharing, Discord is excellent. It’s still the best at those specific things. But for us at Tiptap, the wheels fall off the second you try to use it as a "one-size-fits-all" Chat+Forum hybrid.

A linear chat is an inefficient place to hold specific technical discussions. Bug reports, feature requests, and random questions all bleed into each other. You end up with a single stream of messages where five different people are talking about five different things at once. It’s exhausting for both users and maintainers.

Discord tried to fix this with Threads and Forum Channels. On paper, it sounds like a solution. In reality, the implementation lacks the depth required for professional OSS management.

Threads and Forum Channels Just Aren't Good Enough

At Tiptap, we hit this exact wall. People were constantly talking over each other in one big mess. To fight the chaos, our team started asking people to use Threads.

Threads work if your server is tiny and you can manually police every message. But once you grow to the scale of a popular library, enforcing that rule is impossible. Discord doesn’t give maintainers the permissions to handle this properly—you can’t, for example, force a "threads-only" mode in a standard text channel. People just keep using the chat for what it is: a chat.

I spent way too much time wondering how to fix this, and eventually, we pulled the trigger on Forum Channels. These are basically mini-message boards that force people to create a thread. At first, I was happy—the noise went down and the structure improved. But then I realized: user interaction completely cratered.

By trying to fix the noise, we accidentally stifled the community. The casual small talk vanished. People only show up to our Discord now when they have a specific problem. Because the "vibe" is gone, other developers don't hang out there anymore, which means there’s no one left to help answer the questions.

The Moderation is a Nightmare

To make matters worse, managing Forum channels is unnecessarily difficult. For example, we have channels for community job postings and hiring profiles. People ignore the rules and post in the wrong spot constantly.

In a real forum, I’d just move the post to the right category, edit the tags, or merge it with a duplicate. On Discord? You can’t move anything. You can’t merge threads. If someone spends 20 minutes writing a great post in the wrong channel, our only options are to delete their hard work or let the channel stay polluted. It’s counter-productive.

We ended up with the worst of both worlds: a "community" that doesn't talk, and a forum that is hard to manage, impossible to search, and a pain to moderate.

The Death of a Community

Now that the Discord is effectively "dead" as a social hub, it’s just a closed-off support board. It’s not a place people visit to hang out or learn; it’s just a place to drop a question and leave. For any user who doesn't have a problem right now, there is zero reason to be there.

Because of that, we are planning to reopen the chat channels and move our actual "knowledge base" and forums away from Discord entirely.

The Walled Garden Problem

This is the biggest issue of all. On an open forum, anyone can use a search engine to find a solution to a problem. Discord, however, is a walled garden. Everything is locked behind a login.

Search engines can’t index the thousands of helpful answers and discussions happening in your community. That means every time a user has a question, they can't find the answer on the web—they have to join your server and ask it all over again. It’s a massive waste of everyone's time.

In 2026, this is even more critical. It’s not just about Google SEO anymore; it’s about LLM traffic. AI crawlers and agents can’t learn from your community’s collective wisdom if it’s trapped inside a Discord channel. You are effectively hiding your documentation from the tools that developers use every day to find answers. You lose out on public traffic, you hurt your project's discoverability, and you force your maintainers to repeat themselves for eternity.

What are the Alternatives?

This is where the Tiptap team is currently stuck. We want to keep the Discord server for its original purpose (quick, real-time chatting), but we need a more structured, public solution for support and feature requests.

We are looking at two main options:

Option 1: GitHub Discussions

Since Tiptap already lives on GitHub, this is the "low friction" choice. Right now, it's underutilized because attention is usually split between Discord and GitHub Issues.

The Pros: It’s where the code lives. It integrates perfectly with Issues and Releases—you can turn a discussion into an issue with one click.

The Cons: We don’t own it. If GitHub goes down or changes their terms, we’re at their mercy. Also, the SEO and crawler traffic stays on GitHub rather than our own project site.

Option 2: Self-hosted Discourse

This is the "pro" route. A self-hosted Discourse instance gives us 100% control over the theme, extensions, and moderation.

The Pros: All that search and AI-agent traffic lands on our own domain. It makes the community feel like a "home." We can moderate exactly how we want.

The Cons: It requires maintenance, updates, and server management. Plus, asking users to create another account on a third-party site is a significant barrier to entry.

So what’s the verdict?

We’re still torn, but we’re leaning toward GitHub Discussions. From a maintainer's point of view, the integration into our existing workflow is just too good to ignore. It keeps everything in one place and doesn't add "server maintenance" to an already busy schedule.

As for Discord? We’re going to pivot it back to what it was meant to be: a chat community. We’ll be more approachable there for direct messaging and quick chats, but the "knowledge" will live in the open.

I’ll keep you posted on what we decide. Hopefully, this gives you some insight into the messy reality of community building in the open-source world.

If you liked this post, feel free to follow me here on Dev.to, over on Bluesky or on Github.

This new HTML attribute will help you with loading states

Dominik Biedebach — Sat, 01 Jul 2023 14:57:50 +0000

Staying up to date with the latest developments in our standard web languages can be challenging, isn't it? However, I recently came across a new feature that proves to be immensely helpful for several use cases.

The new `inert` attribute

The inert attribute is a powerful new boolean attribute designed to provide precise control over the interactivity of an element. Its functionality allows developers to effortlessly determine when an element should be interactive or non-interactive, so no more user-select: none or pointer-events: none!

The best thing about this: Additionally, the inert attribute serves as an event and event bubbling inhibitor, while also deactivating focusing elements. This remarkable feature eliminates the need to individually disable children or manage event handlers on the element itself!

What could this be used for?

One of the primary applications that immediately comes to mind is utilizing the inert attribute for form elements. Consider a scenario where you have a form that submits data via fetch. Previously, you would have had to individually disable each input element or the entire form while also taking measures to prevent events from being triggered by the form or its inputs.

Now, with the introduction of the inert attribute, achieving this functionality is incredibly simple. By just adding <form inert> to the form element, you can effectively disable any interactive behavior associated with it during the submission process.

Furthermore, leveraging the inert attribute opens up exciting possibilities for user interface design. You could opt to style the elements with the inert attribute as transparent, giving users a clear visual cue that these elements are currently non-interactive. This enhances user understanding and provides a more intuitive user experience overall.

Code Example

<form inert>
  <!-- your form content here -->
</form>

@keyframes loading {
  0% {
    opacity: .3;
  }
  50% {
    opacity: .5;
  }
  100% {
    opacity: .3;
  }
}

form[inert] {
  animation: loading 1s forwards infinite linear;
  opacity: .3;
}

Further reads

Sharing your Tailwind Configuration between Monorepo Packages

Dominik Biedebach — Fri, 23 Jun 2023 20:45:42 +0000

In this post, you will learn how to share your Tailwind configuration between multiple packages inside a monorepo. It's important to note that the example provided here uses NPM workspaces, and while it may not be directly applicable to other solutions like Yarn, PNPM workspaces, Lerna, or Nx, the principles discussed can still be helpful.

Example Tailwind Monorepo Setup

Let's begin by examining the example project setup we'll be using for this explanation:

- packages
  - ui
  - web
- package.json

As you can see, we have two packages. The ui package represents the UI component package from which we export all our React components. It will also serve as the location for our Tailwind configuration, which we want to import into our web package. Keep in mind that this approach can also be extended to other workspace packages within your monorepo.

Setting up Tailwind

Before we dive into the specifics of sharing the Tailwind configuration, let's make sure we have the necessary setup in place. In this example, we'll be using Vite to generate our React application. You can follow the Tailwind setup as described in their documentation to get started. Once you've run all the necessary commands, your web directory should contain the following files:

- postcss.config.js
- tailwind.config.js

Moving the Theming Information

With our initial setup complete, we can now proceed to move the theming configuration out of the web package.

To achieve this, start by copying the theme block from your Tailwind configuration file located at packages/web/tailwind.config.js. Create a new file at packages/ui/tailwind.config.js, and paste the copied theme block into it.

It's important to name the config file tailwind.config.js so that developer tools can parse your theme from the UI package as well.

Your files should now look like this:

packages/web/tailwind.config.js

/** @type {import('tailwindcss').Config} */

export default {
  content: [
    './src/**/*.{js,jsx,ts,tsx}'
  ],
  plugins: [],
}

packages/ui/tailwind.config.js

/** @type {import('tailwindcss').Config} */

export default {
  theme: {
    // ... your theme configuration
  }
}

As you can see, inside our UI package, we only include the theming information. This approach is beneficial because we don't want to configure plugins globally since the UI project lacks a build process and won't process the plugins.

While it might be tempting to include this configuration directly in your web project, it's recommended to keep the plugins in separate projects.

Now, let's include our theme from ui in our web configuration. Add the following line to packages/web/tailwind.config.js:

import config from '../ui/tailwind.config'

Additionally, you need to allow Tailwind to watch your UI components and the Tailwind configuration file. This ensures that your build process can update your external theme configuration.

To do this, add the following lines to the content array in packages/web/tailwind.config.js:

{
  "content": [
    // paste it below your normal content configuration
    '../ui/**/*.{js,jsx,ts,tsx}',
    '../ui/tailwind.config.js',
  ],
}

Voila! Your project should now pick up the external Tailwind configuration correctly, enabling you to share your theme across multiple projects.

Conclusion

Thank you for reading this post. I hope you found it helpful! If you enjoyed this content and would like to read more, feel free to follow me on Twitter and Github.

If you're in need of a solid editor library for your next project, be sure to check out Tiptap. It's an open-source project, and we always appreciate feedback and contributions!

Apollo GraphQL Question: How to handle invalid network requests for mutations with optimistic UI?

Dominik Biedebach — Wed, 09 Oct 2019 13:34:46 +0000

Hey fellow dev.to readers and writers! Today I have a quick question regarding Apollo GraphQL.

I'm currently working on an offline support feature so we can schedule mutations offline and show optimistic UI responses for them while the server does not respond.

That works fine while being offline, so everytime I submit a chat message, I get an immediate response from the Optimistic UI cache but if I go offline and send messages, I won't get any optimistic UI responses if the network requests are failing.

Am I missing something crucial on that concept?

Would love to hear from you!

Thanks!

How to get react-native-push-notifications to work with React Native >= 0.60

Dominik Biedebach — Thu, 25 Jul 2019 13:38:14 +0000

Hey! So I spent almost the whole day fiddling around with react-native-push-notifications which has a really slow update cycle.

Besides linking the package via react-native and setting up the native code in iOS it works fine out of the box on iOS devices.

On Android on the other hand, the currently available npm version of the package will break with any react native project using androidx. Thats because androidx dropped the old module structure from android.support to androidx..

Funny thing is: the fix is already commited to the master. So you can just simply install the repository from Github via

npm install npm install git+https://git@github.com/zo0r/react-native-push-notification --save

Now you should have the fixed version in your repository! Follow the android setup guide as described in the README.

The only thing you now need to do is to add a Firebase and Google Play Services version to your apps build.gradle

Add the following values to your ext values just below the supportLibVersion:

googlePlayServicesVersion = "16.1.0"
firebaseVersion = "17.3.4"

my ext configuration now looks like this:

ext {
    buildToolsVersion = "28.0.3"
    minSdkVersion = 16
    compileSdkVersion = 28
    targetSdkVersion = 28
    supportLibVersion = "28.0.0"
    googlePlayServicesVersion = "16.1.0"
    firebaseVersion = "17.3.4"
}

Now you should be able to build your android project and run your app in the simulator!

react-devto: React Hooks for Dev.to

Dominik Biedebach — Mon, 22 Jul 2019 17:54:56 +0000

Hello dear dev.to community!

A few days ago I pushed my React hooks library for dev.to which can be used to fetch articles and user information.

You can find it over here.

Demo

Installation

npm i @d2k/react-devto --save

Usage:

import {
  useArticles,
  useFollowSuggestions,
  useTags,
  useUser
} from "@d2k/react-devto";

const MyComponent = () => {
  // useArticles(page, tag, username)
  const { articles, loading, error } = useArticles();

  // useFollowSuggestions()
  const { suggestions, loading, error } = useFollowSuggestions();

  // useTags(page)
  const { tags, loading, error } = useTags();

  // useUser(username, id)
  const { user, loading, error } = useUser("bdbch");
};

Webdevelopment for Beginners 03 - Bring in some action

Dominik Biedebach — Sun, 21 Jul 2019 23:56:32 +0000

Hey, welcome back to my Webdevelopment for Begginers guide. Today we'll learn how to add images, lists and YouTube videos to our page!

Lists

So lets start with the simplest of the new things to learn: Lists. Lists can be used everywhere where content is listed. That could be a simple recipe list, a list of users or a navigation.

Yes a navigation is also a list of links, so using a list for your navigation items would be the best, semantic solution.

Creating lists is very easy. This is how two lists would look like in code:

<html>
  <head>
    <title>Hello world</title>
  </head>

  <body>
    <h1>Tutorial demo website</h1>
    <p>
      This is a tutorial demo page for my dev.to beginner tutorial about
      HTML.<br />
      You can find my profile
      <a href="https://dev.to/bdbch/" target="_blank">here</a>
    </p>

    <ul>
      <li>Twitter</li>
      <li>Github</li>
      <li>Dev.to</li>
      <li>Spectrum.chat</li>
    </ul>

    <ol>
      <li>First step</li>
      <li>Do something else in the second step</li>
      <li>Another step which is the third</li>
    </ol>
  </body>
</html>

As you can see we have three new tags. <ul>, <ol> and <li>

`<ul>`: Unordered lists

ul stands for unordered list. This means our list will not be numbered or ordered in any way. It's not self-closing and requires content.

`<ol>`: Ordered lists

ol stands for ordered list. This means our list will be ordered in a logical way. This could be a numbered list, or a alphabetic list.

`<li>`: List items

li stands for list item and is required to build lists. This element must always be used in <ol> or <ul> lists. Otherwise you won't be able to create semantic items in your list.

Now how does our website look like?

Awesome!

Nesting lists

You can nest lists inside each other. To do this, you need to create a new <ul> or <ol> inside a <li> list element. A nested list would look like this in code:

<ul>
  <li>
    Twitter
    <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
  <li>Github</li>
  <li>Dev.to</li>
  <li>Spectrum.chat</li>
</ul>

This will result in something like this:

As you can see, it works as expected.

Images

So now it gets interesting. Lets insert an image into our website. But how do we do this? Luckily we have the tag img at our disposal. The img tag requires a few attributes to run correctly but it really isn't that complicated.

Lets see how to use an image. We're using unsplash.it for our pictures:

<img src="https://unsplash.it/500/500" alt="Image description for screen readers" />

You can see that we used the src and alt attributes for our img tag.

`src`

src stands for source and requires a link to a valid image.

`alt`

alt stands for alternative and means the image description if the image can't be loaded or a person can't see the image and requires a screenreader.

Now lets see the page output, right?

Wasn't that hard, right?

YouTube Video Embed

Now lets get some action into the page! Let's embed a video from YouTube! For that you'll need the embed code. You can find it on a YouTube video when you want to share it. Lets add the embed code to our website.

<iframe width="560" height="315" src="https://www.youtube.com/embed/9SBNCYkSceU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

You can see that YouTube uses a tag called <iframe>. A iframe is a frame which can embed external websites in your document. It even uses the same src attribute as the <img> tag.

The width and height are defined via the width and height attributes. All other attributes are specific attributes for iframe permissions and if the iframe can go fullscreen.

Now if we open our website with this embed, it will look like this:

So now we have an embedded version of YouTube in our HTML document which will start on click. Easy!

Conclusion

Now that we played around with tags and attributes, I think it's time to build a website with multiple pages and create a navigation. Check out the next post if you want to learn more about it!

Thanks for reading!

Webdevelopment for Beginners 02 - Lets start a project

Dominik Biedebach — Sun, 21 Jul 2019 13:08:53 +0000

Welcome to my second part of the Webdevelopment for Beginners series! In this part we will start creating our first own project and write down some code. But before we write code, I'll explain to you what kind of code you're actually going to write.

Meet HTML

HTML is a markup language used by browsers to create a "tree structure" of nodes which will be rendered. It's the core of every website and you won't come around HTML if you want to learn webdevelopment. But it's actually very easy if you can think in ~~portals~~ boxes.

A HTML file is made out of a lot of Tags.

<header>
  <p>Hello world</p>
</header>

Here I used two tags called header and p. <header> is used to tell your browser that it's a header element, while <p> is a shorthand for paragraph.

Some browsers bring styles for their elements by default (for example headlines, paragraphs and lists always have default styles determined by the browser). A <header> element on the other hand does not provide any styles and will behave the same as any other element which will not have styles provided by the browser.

So this code would print out a header element with a paragraph containing "Hello world" in it.

What kind of Tags are out there?

A TON. With HTML5 we received a lot of new tags to play around with. Most of them are semantic tags. Semantic tags are used to tell your browser what kind of element something is. <header> for example tells your browser, that it's a header element. This information can also be helpful for screen readers, search engines and more).

You can see a full list of HTML elements on the MDN (Mozilla Developer Network).

As you can see there are plenty of them and each of them has their own role. In this tutorial you will learn a few elements you'll need a lot.

Lets start creating a website

Enough talk about HTML, lets create a project and use it. I'd recommend creating a folder just for your website. I'll call mine example-website. Inside this new folder, we will create a file called index.html. The index file is always the first page loaded by most of the webservers out there so index.html would be your homepage.

My workspace in Visual Studio Code now looks like this.

You can now open your browser and drag in your index.html file to open it.

Well this looks boring. In Firefox and Chrome you can open the developer tools by pressing F12 or Command+Shift+I. For me it looks like this:

As you can see, we have some code on the right side of the screen, but we actually didn't write a line of code yet. How can this be? The reason for that is, that every HTML file is required to have a <html>, <body> and <head> tag.

The <html> tag is the wrapper for your whole document. Everything lives in this file and it's the root node for your document.

The <head> tag is a place for meta informations like the page title, descriptions and other informations for your browser. It's also the place where most of the styling assets will be loaded at.

The <body> tag is the place, where the party actually is going on. It's the content of your website that will be visible to your visitors. Since every website requires these tags, we'll start writing them on our own in our index.html.

<html>

<head>
  <title>Hello world</title>
</head>

<body>
</body>

</html>

The formatting is just my own choice and best practice defined by prettier. You can write your code as you like but you can try to stick to my style of indentation if you'd like to.

As you can see, we defined the html, head and body tags of our website but I also added a <title> tag with Hello world in it. What does it do? Well reload your website in your browser and see it by yourself!

As you can see, we now have a title for our website defined in the browser tab. The title tag is a tag with meta informations for your browser and also search engines or crawlers.

But your page is still white. Meh. How about we put on a title and some description of what this website is?

<html>

<head>
  <title>Hello world</title>
</head>

<body>
  <h1>Tutorial demo website</h1>
  <p>This is a tutorial demo page for my dev.to beginner tutorial about HTML.</p>
</body>

</html>

We added in a <h1> and <p> tag here. We already talked about the <p> tag which means paragraph. But what does the <h1> mean? The h stands for headline and the number behind it is the type of headline.

If you think about it as a Word document, you would have 6 types of headlines. Each has it's own priority. <h1> to <h6> would mean that <h1> has the highest priority and should be used for page titles while <h6> has the lowest priority and should be used for very small section headlines.

If we now load our page, this is what we should see:

Cool! Now you have your first document written in HTML. Quite boring but at least something.

Wouldn't it be cool, if we could also add a link to your dev.to profile? Lets try this out!

<html>

<head>
  <title>Hello world</title>
</head>

<body>
  <h1>Tutorial demo website</h1>
  <p>
    This is a tutorial demo page for my dev.to beginner tutorial about HTML.<br />
    You can find my profile <a href="https://dev.to/bdbch/">here</a>
  </p>
</body>

</html>

What is going on? We reformatted the paragraph a bit. As you can see, we're using a <br /> here. Why is it written in this strange fashion? It's a self-closing tag. br stands for a line break which means, it can't have content itself. If a tag can't have it's own child element, it's a self closing element and can be written like this: <tag />. Another example for this would be images which I will show you afterwards.

You can see another new tag. <a> with some strange giberrish afterwards. This gibberish is an attribute. HTML tags can have many of them and they modify the behaviour of a tag.

The <a> tag is an anchor (or link) which means it can link your website to another page on click. Since you have to tell the anchor where to link to, you can use attributes to give it the information it needs.

This <a> tag would now link to my dev.to profile. Let's give it a try!

Now that works! Awesome. But it replaces the current tab 🤔, how could we fix t hat? Let's bring in another attribute called target. Both attributes are exclusive to the anchor tag. Target defines where the browser should open the link.

<html>

<head>
  <title>Hello world</title>
</head>

<body>
  <h1>Tutorial demo website</h1>
  <p>
    This is a tutorial demo page for my dev.to beginner tutorial about HTML.<br />
    You can find my profile <a href="https://dev.to/bdbch/" target="_blank">here</a>
  </p>
</body>

</html>

We set the target attribute to _blank. This means it will open in a new window. Since browsers now have tabs, it will open in a new tab instead.

You can see all kind of attributes for the <a> tag here.

There we go. Now the link opens in a new tab.

Conclusion

I think this should be enough to get the first concepts of HTML. My suggestion for you would be to try around a few elements from here. Play with them and their attributes to learn a bit more about them.

In the next part we will be adding images, lists and embed a YouTube player!

See you next time.

Webdevelopment for Beginners 01 - How to get started

Dominik Biedebach — Sun, 21 Jul 2019 13:08:42 +0000

Welcome to my second tutorial series called Webdevelopment for Beginners. This series will be written for beginners trying to get into Webdevelopment but don't know where to start. I'll try to keep everything as simple as possible and link resources to learn more.

In the span of this tutorial you will read about the following topics:

The tools used for webdevelopment
Awesome learning resources and links
What is HTML and how to write it
What is CSS and how to write it
The box layout and how layouting in browsers work
How to combine HTML and CSS to create simple page layouts
How to host a website
What is JavaScript and how to write it

Lets get started: What tools do you need to start developing websites?

Luckily you really don't need any tools to begin with webdevelopment. You could fire up your notepad or any other text editor and start writing code which is okay but for beginners I suggest using tools that can help you memorizing code without looking up a tutorial or documentation every 5 seconds.

For that, I'd suggest Visual Studio Code developed by Microsoft. It supports autocompletion for code and helps you with suggestions for code you write.

I'd advise against any tool that supports WYSIWYG (What you see is what you get). Visual editors are bad for you and won't help you with your future development because it generates really bad code 90% of the time and won't help you actually learning the code.

But if I can use a visual editor, why should I learn to code?

As I said visual editors generate code really bad. That could change in a few years with AI and Machine Learning but even then editors never really work well with logic implementations.

Also it's way more fun writing code and seeing the output working fine. :)

Any other tools needed?

You actually just need a browser. I'd suggest using Chrome or Firefox. Chrome has superior development tools when it comes to editing styles, responsive development, debugging JavaScript or analyzing your page but will watch you (since it's Google).

If you are a privacy advocate I'd suggest using Firefox. It also has good styling devtools, a really good layouting helper and other nice tools. Just the debugger and analyzing tools are behind Google Chrome.

After having your preferred tools setup and running, you're ready to write your first small website.

Read about it in my next post in this series!

A quick explanation on useEffect

Dominik Biedebach — Sat, 20 Jul 2019 23:35:43 +0000

I got asked if I could write a quick explanation on the useEffect hook provided by React and thought "Sure, that should help a few people!".

useEffect can behave like componentDidMount shouldComponentUpdate and componentWillUnmount in one function if you set it up correctly. In this post I'll show you a few ways to replicate different lifecycle behaviours.

Keep in mind that useEffect uses the second argument dependencies as a performance tool

Here is an interesting read about how you can write your hooks in general even without dependencies:

https://dev.to/samsch_org/effects-are-not-lifecycles-551o

Example as `componentDidMount`

First you can write an Effect that will just run once when the component mounted and will never run again:

useEffect(() => {
  console.log('I was mounted and will not run again!')
}, [])

Important here is the empty array as a second argument. The second argument of useEffect can be used to watch properties for changes. See the following.

Example as `shouldComponentUpdate`

useEffect can also help with watchers on your properties so you can run it everytime a specific value is updated. Let's say we have a prop called "name" and our component should update something via effect everytime the name prop changes you could do it like this:

const MyComponent = (props) => {
  useEffect(() => {
    document.title = `Page of ${props.name}`
  }, [props.name])

  return <div>My name is {props.name} </div>
}

You can see that we passed props.name into the array in the second argument. This will now cause the effect to always run again when the name changes.

Side note: You should always set the second argument because otherwise you can run into render loops.

Example as `componentWillUnmount`

useEffect can also be used to run code when the component dismounts. This is effective for subscriptions or other listeners (Websockets for example).

let bookSubscription = null
useEffect(() => {
  // stop the subscription if it already exists
  if (bookSubscription && bookSubscription.unsubscribe) bookSubscription.unsubscribe()

  // start a new subscription
  bookSubscription = startBookSubscription({ bookId: props.bookId })

  return () => {
    // stop the subscription when the component unmounts
    bookSubscription.unsubscribe()
  }
}, [props.bookId])

You can see that now we used all options available. This code will now

Start a new subscription when the component was mounted
Update the subscription with the new bookId when the bookId prop changes
unsubscribe the subscription when the component gets unmounted.

You can run logic whenever the component unmounts by returning a function in your effect.

I hope this quick post was helpful to you and helps you with further development. If you have questions, let me know!

React Hooks for Data Part 1 - Fetching Data

Dominik Biedebach — Fri, 19 Jul 2019 22:03:15 +0000

So the large hype on React Hooks is over and the community isn't talking about them that much anymore. But seriously hooks are beasts. In this post I'll explain how you can use React Hooks to fetch and submit data to any API (I'll use REST in this guide).

Writing your own hook

We'll start with writing our first hook to fetch books from an API. Here is the example code:

import { useEffect, useState } from 'react'

// The hook is just a simple function which we can export
export const useFetchBooks = () => {

  // First we define the necessary states for our hook
  // this includes book, the loading state and potential errors
  const [books, setBooks] = useState([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)

  // useEffect can be compared to componentDidMount,
  // componentDidUpdate and componentDidUnmount
  // read more about useEffect here:
  // https://reactjs.org/docs/hooks-effect.html
  useEffect(() => {

    // First we set the loading and error states
    setLoading(true)
    setError(null)

    fetch('https://library.com/api/books')
      .then(res => res.json())
      .then(json => {
        setLoading(false)
        if (json.books) {
          setBooks(json.books)
        } else {
          setBooks([])
        }
      })
      .catch(err => {
        setError(err)
        setLoading(false)
      })
  }, [])
  return { books, loading, error }
}

Now this looks complicated but really it isn't. Remove the comments and it will be a really short function which fetches data and updates states.

Now that we have the hook, we can use it in a component like this:

import React from 'react'
import { useFetchBooks } from './utils/hooks'

const BookList = () => {
  // use your own hook to load the data you need
  const { books, loading, error } = useFetchBooks()

  if (loading) return <div>Loading...</div>
  if (error) return <div>{error}</div>

  return (
    <div>
      { 
        books &&
        books.length > 0 &&
        books.map(book => <div key={book.id}>{book.title}</div>)
      } 
    </div>
  )
}

export default BookList

Use parameters in your hook

Now our hook works fine but it's still a bit stupid. Lets say you want your users to be able to search for books in the list. You could do it like this:

import { useEffect, useState } from 'react'

// Note here the new parameter we pass into the hook called "search"
// this will be used to search the api for specific books
export const useFetchBooks = (search) => {
  const [books, setBooks] = useState([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)

  useEffect(() => {
    setLoading(true)
    setError(null)

    // Change the apiUrl according to the search string
    const apiUrl = search && search.length > 0 ?
      `https://library.com/api/books?search=${search}` :
      'https://library.com/api/books'

    fetch(apiUrl)
      .then(res => res.json())
      .then(json => {
        setLoading(false)
        if (json.books) {
          setBooks(json.books)
        } else {
          setBooks([])
        }
      })
      .catch(err => {
        setError(err)
        setLoading(false)
      })

  // This is important. We pass the new search parameter into
  // the empty array we had before. This means, the effect
  // will run again if this parameter changes
  }, [search])

  return { books, loading, error }
}

Now you can use the hook like this in your component:

const { books, loading, error } = useFetchBooks(props.search)

This should be enough for part 1 and should clarify how to use hooks to fetch data from any API.

I'll update this post with a link to part 2 as soon as I'm done with it.

Have fun!

Automatically watch queries in Apollo GraphQL

Dominik Biedebach — Fri, 19 Jul 2019 15:14:06 +0000

I just worked on one of our hooks that fetches data from our Apollo GraphQL server, but I noticed that my data won't be updated in the local cache when the current subscription is not open.

This is how my code looked like before:

const chatId = '123456';

client.query({
  query: GET_CHAT_MESSAGES,
  variables: {
    chatId,
  }
}).then(res => {
  // do stuff here
})

This query would not update after being run once because Apollo saves all queries locally without knowing about potential changes.

When mutations were made, the chat view would still show an old state, even when my subscription would rewrite the cache.

What I had to do was using client.watchQuery instead of client.query. watchQuery allows you to watch a query for potential changes via mutations and re-run the query if needed. It also allows you to use the 'cache-and-network' fetch policy.

Now my code looks like this:

const chatId = '123456';

const querySubscription = client.watchQuery({
  query: GET_CHAT_MESSAGES,
  variables: {
    chatId,
  },
  fetchPolicy: 'cache-and-network'
}).subscribe({
  next: ({ data }) => { // do stuff },
  error: (e) => console.error(e)
})

Just make sure to disconnect the subscription if it is not needed anymore with querySubscription.unsubscribe().

Forem: Dominik Biedebach

Why Discord Sucks for Developer Communities

Discord is Great for Chat, Terrible for Everything Else

Threads and Forum Channels Just Aren't Good Enough

The Moderation is a Nightmare

The Death of a Community

The Walled Garden Problem

What are the Alternatives?

Option 1: GitHub Discussions

Option 2: Self-hosted Discourse

So what’s the verdict?

This new HTML attribute will help you with loading states

The new inert attribute

What could this be used for?

Code Example

Further reads

Sharing your Tailwind Configuration between Monorepo Packages

Example Tailwind Monorepo Setup

Setting up Tailwind

Moving the Theming Information

Conclusion

Apollo GraphQL Question: How to handle invalid network requests for mutations with optimistic UI?

How to get react-native-push-notifications to work with React Native >= 0.60

react-devto: React Hooks for Dev.to

Installation

Usage:

Webdevelopment for Beginners 03 - Bring in some action

Lists

<ul>: Unordered lists

<ol>: Ordered lists

<li>: List items

Nesting lists

Images

src

alt

YouTube Video Embed

Conclusion

Webdevelopment for Beginners 02 - Lets start a project

Meet HTML

What kind of Tags are out there?

Lets start creating a website

Conclusion

Webdevelopment for Beginners 01 - How to get started

Lets get started: What tools do you need to start developing websites?

Any other tools needed?

A quick explanation on useEffect

Example as componentDidMount

Example as shouldComponentUpdate

Example as componentWillUnmount

React Hooks for Data Part 1 - Fetching Data

Writing your own hook

Use parameters in your hook

Automatically watch queries in Apollo GraphQL

The new `inert` attribute

`<ul>`: Unordered lists

`<ol>`: Ordered lists

`<li>`: List items

`src`

`alt`

Example as `componentDidMount`

Example as `shouldComponentUpdate`

Example as `componentWillUnmount`