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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions