Skip to content

[Feature]: Transform ReactJS useRef into simple let #3

@edemaine

Description

@edemaine

Input code

import React, { useRef } from "react";
import { render } from "react-dom";

const Component = () => {
  const ref = useRef();
  useEffect(() => {
    ref.current.style.color = "purple";
  }, []);
  return <div ref={ref}>Hello!</div>;
};

render(() => <Component />, document.getElementById("app"));

Expected Output

import { render } from "solid-js/web";

const Component = () => {
  let ref;
  useEffect(() => {
    ref.style.color = "purple";
  }, []);
  return <div ref={ref}>Hello!</div>;
};

render(() => <Component />, document.getElementById("app"));

Additional context

In addition to removing useRef and replacing const with let, ideally we could remove the .current suffix after every ref.

A challenge is that refs shouldn't be passed into functions though; you'd need to wrap them in functions.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions