I keep trying to use useRender that I imported from

import { Canvas, useRender } from 'react-three-fiber';

const App = () => {
  const meshRef = useRef();
  const [hovered, setHovered] = useState(false);
  const [active, setActive] = useState(false);
  const props = useSpring({
    scale: active ? [4, 4, 4] : [2, 2, 2],
    color: hovered ? "red" : "hotpink"
  });

  useRender(() => {
    meshRef.current.rotation.y += 0.01
  })

It keeps giving me an error however that 'useRender is not exported from 'react-three-fiber'. When I go to the docs (/4-hooks) it says that it can be exported.

Anyone have any idea whats going on? I'm following along this tutorial

I keep trying to use useRender that I imported from

import { Canvas, useRender } from 'react-three-fiber';

const App = () => {
  const meshRef = useRef();
  const [hovered, setHovered] = useState(false);
  const [active, setActive] = useState(false);
  const props = useSpring({
    scale: active ? [4, 4, 4] : [2, 2, 2],
    color: hovered ? "red" : "hotpink"
  });

  useRender(() => {
    meshRef.current.rotation.y += 0.01
  })

It keeps giving me an error however that 'useRender is not exported from 'react-three-fiber'. When I go to the docs (https://inspiring-wiles-b4ffe0lify.app/4-hooks) it says that it can be exported.

Anyone have any idea whats going on? I'm following along this tutorial https://www.youtube./watch?v=1rP3nNY2hTo

• javascript
• reactjs
• react-three-fiber

4 Answers 4

Instead of useRender use useFrame, it will be fine.

useRender is very old, it's called useFrame and also works a little different. the only official docs atm are here: https://github./react-spring/react-three-fiber/blob/master/api.md

It looks ok, what version are you using and did it install correctly. Maybe delete node_modules folder and execute npm install and try again

import { useRender } from 'react-three-fiber'
import { Canvas } from 'react-three-fiber'

install > @react-three/fiber and then change 'useRender' for 'useFrame'; it should work but be careful with this! you should get information from official documentation! ---> https://github./pmndrs/react-three-fiber

import React, { useState, useRef } from "react";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { Canvas, extend, useThree, useFrame } from "@react-three/fiber";


extend({ OrbitControls });

const Controls = () => {
  const orbitRef = useRef();

  const { camera, gl } = useThree();

  useFrame(() => {
    orbitRef.current.update();
  });

  return <orbitControls args={[camera, gl.domElement]} ref={orbitRef} />;
};

const Box = () => {
  const [hoverd, setHoverd] = useState(false);
  return (
    <mesh
      onPointerOver={() => setHoverd(true)}
      onPointerOut={() => setHoverd(false)}
    >
      <boxBufferGeometry attach="geometry" args={[2, 2, 2]} />
      <meshBasicMaterial
        attach="material"
        color={hoverd ? "hotpink" : "gray"}
      />
    </mesh>
  );
};

const Box = () => {
  return (
    <Canvas>
      <Controls />
      <Box />
    </Canvas>
  );
};

export default Box;