I have created an SDK using vanilla JS. This SDK is supposed to be used by multiple clients (websites). It interacts with my backend using APIs. I want to implement authorisation in the SDK. Since the SDK doesn't deal with specific user info but the client itself, I can't use username-password or Authorisation Code with PKCE. So I am left with client_credentials and JWT. With client_credentials, the client_id and client_secret would be exposed on the frontend (in the SDK) as it is required to get the access token. Is there any way of authorisation where no credential info is exposed?
PS: I can have domain whitelisting but still I don't want the client_secret on the frontend

Hey everyone,

I’m a college senior with a passion for music and startups, and I’m working on an app called CrateDig—a digital reimagining of the vintage record store experience. Think mystery albums, virtual crates, and community-driven album ratings, all designed to make music discovery fun again.

I have the concept, business model, and user experience mapped out, but I need an experienced iOS developer with backend experience to bring it to life. Ideally, you’re skilled in Swift, SwiftUI, or React Native for the front end and have experience with backend technologies like Node.js, Firebase, or similar to handle the server and database aspects. I also envision expanding the app to Android and web in the future, so someone with an eye on scaling is a plus!

Since I’m still a college student, I can’t afford to pay a salary upfront. I’m looking for someone who’s genuinely excited about the idea and is as passionate about music as I am. I want someone who’s invested in building something great together and ready to take on both the front-end and back-end of the app. I’m open to discussing equity, revenue share, or another arrangement that makes sense.

If this sounds interesting, let’s connect—I’d love to hear your thoughts and see if we vibe. Drop a comment or DM me!

For those of you who have done both UI.dev (react.gg) and Joy of React (by Josh w. Comeau) which would you recommend and why?

what is going on is reactjs deprecated ?

npx create-react-app my-app -> deprecated
what should i do guys i'm completely lost here
is vite.dev === react js ?

I have a list of objects with an enum and a Date that I would like to display in a calendar. The calendar should show if there is an event on a particular day but I do not want the ability to select a day. Kind of like a read-only period tracker.

Any suggestions? I've looked into MUI, react-calendar, react-big-calendar, and fullcalendar but I haven't been able to get any of them to work quite how I would like.

Hey, I have a react project where i use esbuild. I cant update to react 19 yet so I am on v18. I read the docs that you still can use the react compiler as babel plugin in this case. There are many setups described, for vite, next, webpack and so on. But esbuild is not mentioned. So I am wondering if its possible to use the plugin? And how?

I've been thinking about this post for a while. I had to deal with this same problem over and over in a few companies. KISS is the way until it is definitely not, because I feel like it just fails at scale.

Examaple:
You have a data grid, not a table a big datagrid, fairly complex, last column is an actions column, eg. it has a cell where are the fabled three dots that open a context menu with some actions, that you can click on. Now the actions could open a modal, or a dialog confirming an action.

With declarative approach, you add a `useState` to each of the buttons, that should open something. Conditionally render the Modal. Cool works, fast, re-renders just the button.

Next you can open a detail view modal by clicking on table row. You do the same, add the state to the component row, conditional render it, still fast, although by default it re-renders the whole row.

Next and next and next, you end up at the top of the table, sending open/close functions all over the place, even with a context it sucks, re-rendering or recomputing diffs for the whole table which could have 100 rows and 10 cells for each row, just because you opened a detail modal for single line.

So what is the preferred solution here? `React.memo` optimisations all over the place to keep declarative, somehow leverage context to send the open function and state around or reimplement the modal in an imperative way and handle the state within the ModalComponent and add the modal everywhere needed, having multiple strategies on how to open it at hand (refs, render props - passes the inner open function as a function parametr, or "smart children" - applies onClick internally)

Currently I prefer the imperative way, the only downside I see is that the "wrapping" ModalComponents renders even though the Modal is not opened and refs might be a little harder to follow (eg. not KISS), however it does not cause re-rerenders of the whole tree. You can basically add this modal to all of these places - the context menu actions, the row and the top of the table, without almost any issue.

why does my interceptor never trigger?

axiosConfig: https://pastebin.com/YC1Sr7Qi
loginAPI: https://pastebin.com/GxNWFjgu
authContext: https://pastebin.com/aNjJAHN6

i think only the first 2 are relevent, they are small but i sadly cant post them here since reddit groups up the code together and does not display well.

Hi I'm going through the React tutorial on youtube from freeCodeCamp and am at a section learning about forms.

I understand (and they state in the video) that in React 19 you can provide a function to the action prop on a form (eg action={signUp}. It works in the video but it is not working for me.

If I hit submit the form submits and reloads the page. Also the console is giving this error - Warning: Invalid value for prop `action` on <form> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://reactjs.org/link/attribute-behavior

I did install React with Vite so not sure if there is something I am missing but I do know I am running React 19.0.0 so am unsure what to really do and google hasn't been helpful.

I’ve been using React 19 for a good month now and testing out some of the features. I’ve used it with NextJS and in a separate SPA app.

Is it me or does the release feel very underwhelming? Is there something I’m missing and others have been finding it much better than before?

Maybe I expected much more given the long gap between v18 and v19. V19 definitely an improvement but it doesn’t feel like it moved the needle much.

I've read some things about how you dont always need to use a useEffect here. But now I'm not sure if I'm using useEffect correctly here. This is "smelling" wrong to me.

I'm using Nextjs pages router and TRPC to fetch some Data from the server and pass it to a tanstack table for rendering. I have a global filter that is set when some text is entered into a text box. However i dont want to spam my API on every keypress so im using useDebouncedValue from Mantine to only fire the request after some time has passed. The setPageIndex is there so on initial Render when useEffect is executed, the pageIndex is not set to 0 (for example on refresh of the page. This is because the globalFilter is stored as a url parameter in the background).

1. Is my described usage and the code a good use of useEffect in this case or should I handle this differently?

2. Is there another way to not have const setGlobalFilter = table.setGlobalFilter; for the depedency array? I use it because otherwise eslint warns me that a dependency is missing even if i put table into the array.

Sorry for the pastebin, I couldnt get reddit editor to accept my component as a code block.

Code

So we have the standard CSS, but upon watching many videos on YouTube, everyone had a different approach to designing. Yes every website is unique but the as the type of guy I am, I am getting overwhelmed and trying to wonder which UI/UX framework is the most popular

I'm working on a React project where I want to upload a PDF file in the frontend, display it, and allow users to edit the text content.

I have for now implemented file upload and display using PDF.js, but now I need a way to edit the existing text (not just annotate).

By editing I mean:

• Changing existing text
• Adding new text
• Removing text
• Highlighting/marking text

What is the best approach to truly edit the text inside a PDF in React? Should I convert the PDF to another format first, or is there a direct way to modify text layers?

Any guidance or library recommendations would be appreciated!

I've looked into pdf-lib, but it seems to only allow adding new text, not modifying existing text.

What I like about react-testing-library is that I can set a break point anywhere deep in my code and inspect the code from there. Also, it has a more "unit-test" feeling, because I can theoretically test anything in the code like state etc. What I don't like about it, is that I can not run the code in the browser.

What I like about storybook or playwright testing testing is that I can see the UI and tests in the browser. Which is a great DX. But I can't set break points in the code. Only on top level of the test.

So my question is, do you know of a method / setup where you get the benefits of a framework like react-testing-library where you have tests that feel like unit tests. And you have the benefits of e.g. storybook, where you can inspect the elements in the browser?

So far I know that there is

• jest-preview which is pretty much what I am looking for but it seems it's not actively supported anymore since three years
• the possibility to just use the browser's dev tools to debug, if you use tools like storybook or playwright. But this always feels a bit cumbersome to me

Of course you could also argue that because it's possible to write UI tests with tools like react testing library that can test more or less anything, that they are inviting you to test implementation details. Whereas browser-based testing tools make it impossible to test anything other than the "public / user" interface.

How do you go about it?

ive made a ErrorBoundary and ive noticed that i doesnt work, so i tryed to put the fetch in a try/catch and in the catch i just throw the error, this also does not work.

i should note, i use axios.

Hey folks,
Is there a noticeable performance impact if I create a lot of React elements in a single render cycle? Should I worry about this in large apps, or is it optimized enough that it doesn’t matter? Curious to hear your thoughts or experiences!

I know the difference, useRef doesn't trigger a re-render. But I'm still having a hard time wrapping my head around why we use it, as I had to use it in code recently. basically, I made an imageUpload component for a EditorPage where you upload an image, add some text details to a form, and then submit it.

I have useState for the image's name being displayed once you upload a file, and I have useRef being used to take care of the actual file upload request.

What's the point of me using useRef here, if I'm going to re-render the component anyways to display the image name?

I suppose if I didn't need the image name displayed, useRef would be used here because it's not like the web page needs to re-render? But I do.

The best I could get out of chatgpt after asking a million times was this:

The useRef hook, on the other hand, is used to create a reference to the file input element itself. This reference allows you to interact directly with the DOM element—for example, to reset the input field after a successful upload—without causing a re-render of the component. This direct interaction is beneficial because resetting the file input's value programmatically is not straightforward with controlled components, as React manages the value of the input.

Which just seems like a sort of miasmic answer of 'just because' in regards to inputting file values?

Here's my relevant code if it makes sense:

  /components/ImageUpload

  const ImageUpload = React.forwardRef(({ authToken, onUploadSuccess, fileInputRef }, ref) => {
  const [file, setFile] = useState(null);

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleUpload = async () => {
    if (!file) return;

    const formData = new FormData();
    formData.append('file', file);

    try {
      const response = await axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: `Bearer ${authToken}`,
        },
      });

      const imageUrl = response.data.url;
      onUploadSuccess(imageUrl);

      console.log('Uploaded media:', response.data);
    } catch (error) {
      console.error('Upload error:', error);
    }
  };
return (
    <div>
      <input type="file" ref={ref} onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload Image</button>
    </div>
  );
});

export default ImageUpload;

Editor page

import ImageUpload from '../components/ImageUpload';
import React, { useState, useEffect, useRef } from 'react';
import { addClient } from '../services/clientService';

const EditorPage = () => {
  const [newTestimonial, setNewTestimonial] = useState({ image: '', quote: '', name: '', title: '' });
  const navigate = useNavigate();
  const fileInputRef = useRef(null);
 
const handleAdd = async () => {
  if (fileInputRef.current) {
      fileInputRef.current.value = null;
    }
  }
};


const handleImageUpload = (imageUrl) => {
    setNewTestimonial((prevTestimonial) => ({
      ...prevTestimonial,
      image: imageUrl,
    }));
  };

return (
... 
<ImageUpload authToken={authToken} onUploadSuccess={handleImageUpload} ref={fileInputRef}/>
...
<button id="addButton" onClick={handleAdd}>Add Entry</button>
)

Everything works, I'm just confused why we used useRef here.

https://portfolio-vladio71.vercel.app/
fonts are killing me, i like them and not at same time. `d appreciate any ideas how to make it better)

Hi! I want to use Tailwind CSS 4 in our design system, which will be private and used across multiple products in our team. I would like everyone to utilize the CSS variables and tokens I have defined in the package. How can I expose the design system package in a product when it's installed as an npm package? Should I import the tailwind.css config into each project's CSS file? does that even work?

How to highlight text already HTML rendered in Markdown that maps correctly with the raw Markdown text?

Hi,

I'm beginner in React so my question might be phrased incorrectly. What I would like to do is create the ability to add highlight to text that is already rendered in Markdown so the the user can add notes to the highlighted text.

User flow:

- Page loads with Markdown formatting.
- User wants to add a note on a title, selects the title.
- It turns the selected text into yellow highlights like in a Acrobat.
- Then a modal opens where the user can add notes,
- User can then click back on the highlighted title and open the note again.

I'm using react-markdown. I googled for a solution but I'm not getting any results.

How can I get it to highlight different markdown elements?

Thanks in advance.

I basically wanna create the grid you see on Instagram profile pages, on selecting an element it turns into vertical scrolling, with the scroller, scrolled upto the element selected.

Ik i can change to grid to vertical scroll on selecting an element, but i also want the scroller to be already scrolled up to the selected element.

Hi,

I'm trying to make axios calls (post and get) via a squid caching proxy server (for the caching), and cannot seem to be able to make it work.

If I use the regular agent, it's totally ignored.

If I try and use the https-proxy-agent, my storybook build fails with errors about missing dependencies (like TLS, net and so on). I gather this is because newer versions webpack don't include poly fills.

The project is a npm react library, published to gitlab, and developed and tested in storybook. Everything is working properly except proxying.

Has anyone successfully managed to get a browser app to use a squid type proxy, to hit Https, and got it properly packed up in a webpack storybook please? Any hints? Thank you

George

I am deploying the react project on my company server using pm2.I run like "npm run build","pm2 serve dist (port number) (name) --spa", "pm2 save","pm2 startup", after server reboot, my project is still running but when server shut downs because of electricity goes off or some reasons, My project is stopped after reopening the server I have to run "pm2 restart (name)" every time. How can I fix it?

I have decent experience working with reactjs. But i always find it difficult to picture how react works underneath. I usually come across terms like component tree, ui tree, module tree, render tree, virtual DOM and reconciliation. I'm confused where and when these data models are used by reactjs. ( I understand some of the trees are called with multiple names but what are those?)

Can someone explain what these things are and a step by step chronological order they are created and used by reactjs when rendering UI.

Also appreciate it if you can share some resource or a blog post to understand these things.

According to Vuejs official guide doc

The virtual DOM implementation in React and most other virtual-DOM implementations are purely runtime: the reconciliation algorithm cannot make any assumptions about the incoming virtual DOM tree, so it has to fully traverse the tree and diff the props of every vnode in order to ensure correctness. In addition, even if a part of the tree never changes, new vnodes are always created for them on each re-render, resulting in unnecessary memory pressure. This is one of the most criticized aspect of virtual DOM: the somewhat brute-force reconciliation process sacrifices efficiency in return for declarativeness and correctness.

I wonder react compiler has also ability statically analyze jsx and leave hints in generated code so run time can take shortcuts whenever possible?