Stack Overflow
Stack Overflow

Questions tagged [react-fiber]

React Fiber is a reimplementation of React's core rendering algorithm that was introduced with React v16.0. It introduced scheduling and incremental rendering among many other features.

Resources

64 questions
0
votes
0 answers

How to sync the orbit control for multiple canvases simententiously? (Using React fiber & Drei)

I have 4 differet canvases with Cube geometry. I have written common scene for this and using them in diff canvas. I want to share the orbitcontrol for all simententiously. As of now orbitcontrols are working individually for each canvas. Here is my…
AnilPandiya
  • 1
  • 1
  • 3
0
votes
1 answer

Capturing Events in a react application for analysis

We are looking to capture all the events(like button clicks and textfield changes) in a react application. The object is to capture are user actions so that further analysis can be done on user behaviour. We don't want to implement google analytics…
akshay hulkuli
  • 1
0
votes
0 answers

React-Three-Fiber referencing material under mesh using ref

import { createRoot } from 'react-dom/client' import React, { useRef, useState } from 'react' import { Canvas, useFrame } from '@react-three/fiber' import { OrbitControls } from '@react-three/drei' function Box(props) { // This reference gives us…
user204069
  • 1,215
  • 3
  • 19
  • 25
0
votes
0 answers

Altering and filtering the output of react-dom (next.js 13)

I am using Next.js. I want to wrap each single character rendered in some components with tags; I want these span tags to have some style attributes, in order to render a mosaic animation. Each letter should fade in, or fade from one color to…
Mauro Colella
  • 446
  • 6
  • 12
0
votes
0 answers

Can't update position of camera with pointerLockControls react-three-fiber

I am following this walkthrough and I am trying to implement pointerLockControls with the ability to move, but for some reason I can't, I can use pointerLockControls to lookAround but when I press key it doesn't update my camera position here is the…
Space
  • 35
  • 4
0
votes
0 answers

create controller movement with keys for cube

hey recently started to learn about 3d(threejs) and physics(rapier), I want to control the box movement like a car with arrow keys, but I have difficulty fixing the movement in the right direction with physics. here is a code example…
Nati
  • 116
  • 1
  • 5
0
votes
0 answers

Are there any examples of React Fiber interruption and resumption?

I always heard that In the first phase which is called Reconciliation React creates a list of all changes to be rendered in the UI (an 'effect list', comprising of new and updated components) . The Reconciliation phase can be interrupted, the Commit…
mqliutie
  • 377
  • 2
  • 17
0
votes
1 answer

How React updates Fiber Tree and Work in Progress Tree?

When react commit phase completes, Fiber tree(tree-1) will be replaced with work in progress tree (tree-2 'which has latest updates'), then DOM will be updated, So here my question is: After Fiber Tree is replaced with WIP(work in progress) tree,…
Koushil Mankali
  • 1
  • 3
0
votes
0 answers

I was studying internal working of React and I got really confused about the difference between diffing algorithm and React Fiber

How do React Fiber and diffing algorithm connect with each other? Does React Fiber use diffing algorithm or am I trying to connect two completely different concepts because so far what I have understood is both are a part of the reconciliation…
Shachi
  • 1
0
votes
1 answer

Conversion React Typescript component into Javascript gives errors

I am playing with React Fiber and React Drei but i do not want to use Typescript like in the examples i have found in their git I have converted the following example Stars.tsx with typescriptlang tool This is the output import React, { useState,…
Koala7
  • 1,340
  • 7
  • 41
  • 83
0
votes
1 answer

React.js Context Provider does not pass provided values to useContext

Problem: I'm using the useContext hook to pass data though the DOM, but the only data that gets passed right now, are the initial values from the ImageContext. My Findings: The State images in ImageContextProvider holds the correct values (First…
TheBormann
  • 11
  • 3
0
votes
1 answer

React: How to use innerHTML to unmount child nodes?

I have say around 30K+ components on the page. On click of a button I unmount all the 30K+ components via conditional rendering which becomes super slow around 10+ seconds and causes the page to hang. On the other hand setting the innerHTML to "" on…
Fateh AK
  • 386
  • 5
  • 20
0
votes
0 answers

how can I know what triggered render in React?

I have a very big application with higher order components everywhere. I am in a situation where one of my controls gets the right props and renders right, and then immediately gets wrong props and rerenders again. I cannot figure out what triggers…
Trident D'Gao
  • 18,973
  • 19
  • 95
  • 159
0
votes
1 answer

React fiber animations not working properly

I recently watched a video by Lyn Clarke, stating that ReactJS 16.2.0 or react fiber is providing us a platform where we can have smooth CSS transitions and animations. I tried the same thing by having a transition and creating a list of 999 items…
user8626205
0
votes
1 answer

Making React.js aware of vanilla JavaScript DOM updates

Let's assume I have this hierarchy of components in React 16 application: component A is composed of components B and C Those components are represented by block HTML elements with some non-zero height. in componentDidMount of component B I use…
zmii
  • 4,123
  • 3
  • 40
  • 64
1 2 3
4
5