❌

Normal view

What’s the real problem with useEffect in React?

Here is my honest question:

What's the actual problem with the useEffect hook? All over the X/twitter, I see a lot of negativity about this hook. It seems like a buggy thing in React.

My opinion is that developers blame useEffect because it's often used for data fetching as the primary use case. As we deal with various states like loading, data, error etc… synchronization of these causes bugs.

Also, a misunderstanding of the rendering cycle in React, such as where useEffect gets called could introduce additional misuses and bugs.

Hence, just saying useEffect is evil, may not be the right assumption is what I think. But, there could be cases that I'm missing.

What's your take or opinion about it?

submitted by /u/atapas to r/reactjs
[link] [comments]

Where do you draw the line between derived state and state you sync in an effect?

Curious how people handle this in practice. Take something like a form field whose value is technically "derived" from a couple of other pieces of state (say, a computed total, or a filtered list) but where computing it is expensive enough or async enough that it doesn't feel right to just recompute it inline during render.

The "official" answer is usually "compute it during render, memoize with useMemo if needed," and I get why - it avoids the classic bug where a useEffect writes to state and triggers an extra re-render, plus it keeps the value always in sync by construction. But in practice I keep running into cases where the derivation genuinely can't happen synchronously during render (it depends on a ref, a DOM measurement, or an actual async call), and at that point it stops feeling like "derived state" and starts feeling like its own piece of state that just happens to be initialized from other state.

Where do you personally draw that line? Is there a rule of thumb beyond "sync and cheap = compute in render, anything else = its own state + effect"? And for the async case specifically, do you reach for a library (React Query, SWR, etc.) even for small in-component derivations, or is that overkill below a certain complexity threshold?

submitted by /u/StudyEasyOrg to r/reactjs
[link] [comments]

15 React coding questions worth practicing before your next interview

I put together a list of React problems I kept seeing come up in interview prep β€” mix of core hooks, a couple of classic "build this component" asks, and a few that companies like Meta/Airbnb/Flipkart actually use. Figured I'd share instead of just keeping the list to myself.

Didn't want to just describe them β€” you can open each one and actually write + run the code against real tests in the browser, no setup. Links go straight to the problem.

1. Build a counter with three buttons. The classic warm-up β€” but the interesting part is making sure rapid clicks never lose an update.

Practice counter problem

2. Delay a value until the user stops typing. You've used this in every search box you've ever built β€” now write the hook yourself.

Practice this problem

  1. Track what a value used to be, one render ago. Small hook, but people trip over when it actually updates.

Practice usePrevious hook

  1. Model a shopping cart's add/remove/update-quantity logic. A good test of whether you reach for useReducer or keep fighting with useState.

Create shopping cart

  1. Build a traffic light that cycles red β†’ green β†’ yellow on its own timer. Looks simple until you have to get the timing and cleanup exactly right.

Create traffic light

6. Build a search box where slow responses can't overwrite fast ones. This is the one that trips almost everyone up the first time β€” asked at Airbnb.

Create search box

7. Render a comment thread with infinite nested replies. Recursion inside JSX β€” asked at Meta.

Build nested comment

8. Stop a long list from re-rendering every item on every keystroke elsewhere on the page. A real performance debugging exercise, not just a memo() one-liner.

Practice memoization

9. Give a callback prop a stable identity across renders. Sounds trivial, isn't β€” especially once a child component is memoized.

Stable callback

10. Build a modal where keyboard focus can't escape it. Accessibility question that separates "I use libraries" from "I understand the DOM."

Practice this problem

11. Write a fetch hook that won't re-request data it already has. Basically: build a tiny cache layer from scratch.

Build usecatche

12. Manage state for a multi-step form wizard. Back/next/jump-to-step, without the state turning into spaghetti.

Multi-step form

13. Build an autocomplete search with keyboard-navigable suggestions. Filtering logic plus a surprisingly fiddly amount of UI state.

React auto-complete practice

14. Add undo/redo to a stateful app. Command-pattern state history β€” the kind of thing that's easy to describe and annoying to actually implement cleanly.

Undo/Redo Functionality

15. Build a month calendar grid that handles real date math. Leap years, month boundaries, the works β€” asked at Flipkart.

Build calendar grid

submitted by /u/Ok_Resolve_9157 to r/reactjs
[link] [comments]

Best Fully Open-Source Spreadsheet Component for React with Excel Import/Export?

Hi everyone,

I'm looking for a fully open-source spreadsheet component for React.

I do not want a paid/commercial library or a library where important spreadsheet features require a paid license.

I need something closer to Excel / Google Sheets, rather than just a data grid.

Main requirements:

  • Fully open source and usable in a commercial project
  • React + TypeScript support
  • Import .xlsx Excel files
  • Export to .xlsx
  • Preserve Excel formatting as much as possible
  • Formulas and calculations
  • Multiple worksheets
  • Cell formatting
  • Merge/unmerge cells
  • Copy/paste
  • Sorting and filtering
  • Data validation/dropdowns
  • Freeze rows/columns
  • Undo/redo
  • Insert/delete/resize rows and columns
  • Good performance with larger worksheets
  • API for programmatically reading/updating cells
  • Custom toolbar/components
  • Extensible enough to implement drag-and-drop elements/components into spreadsheet cells

I've already looked at Univer and FortuneSheet, but I'm trying to find the best option with strong Excel import/export support.

My ideal flow is:

Import existing .xlsx β†’ Edit in React β†’ Export back to .xlsx

without losing important formulas, formatting, worksheets, merged cells, etc.

What is the best fully open-source React spreadsheet library in 2026 for this?

If you're using one in production, I'd really appreciate hearing about its limitations, especially around Excel import/export.

Thanks!

submitted by /u/steppenwolf1807 to r/reactjs
[link] [comments]
❌