Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Currying in React components #1253

Open
eWert-Online opened this issue Dec 15, 2024 · 3 comments
Open

[BUG] Currying in React components #1253

eWert-Online opened this issue Dec 15, 2024 · 3 comments

Comments

@eWert-Online
Copy link

Since version melange.4.0.1-52 all react components are getting curried.
The currying of the components leads to the following warning from eslint:

React Hook React.useEffect has an unnecessary dependency: 'a'. Either exclude it or remove the dependency array. Outer scope values like 'a' aren't valid dependencies because mutating them doesn't re-render the component.

Take for example the following component:

[@react.component]
let make = (~a, ~b) => {
  React.useEffect2(
    () => {
      if (a) {
        Js.log(a);
      } else {
        Js.log(b);
      };
      None;
    },
    (a, b),
  );

  React.null;
};
In version 4.0.0-51, the following JavaScript is generated:
// Generated by Melange

import * as React from "react";

function _none_(Props) {
  var a = Props.a;
  var b = Props.b;
  React.useEffect((function () {
          if (a) {
            console.log(a);
          } else {
            console.log(b);
          }
        }), [
        a,
        b
      ]);
  return null;
}

var make = _none_;

export {
  make ,
}
/* react Not a pure module */
In version 4.0.1-52, the following JavaScript is generated:
// Generated by Melange

import * as React from "react";

function make(a) {
  return function (b) {
    React.useEffect((function () {
            if (a) {
              console.log(a);
            } else {
              console.log(b);
            }
          }), [
          a,
          b
        ]);
    return null;
  };
}

function Test(Props) {
  return make(Props.a)(Props.b);
}

const make$1 = Test;

export {
  make$1 as make,
}
/* react Not a pure module */
@anmonteiro
Copy link
Member

this does seem slightly problematic.

i have a feeling that this isn't something we can solve in melange without ppxlib's help. thankfully, there's work to port ppxlib's AST to the OCaml 5.2 AST, which i think would cause this to get fixed.

FTR i believe this is the underlying change that's causing this issue: ocaml/ocaml#12236

@davesnx
Copy link
Member

davesnx commented Dec 25, 2024

I haven't tested deeply, but while working on the reason-react-ppx last week, I found the generated Pexp_fun problematic here. If it's what I think it is (a not very optimal usage of the pexp_fun in the generation) I'm able to fix this in a future release of reason-react-ppx

@anmonteiro
Copy link
Member

I found the generated Pexp_fun problematic here

what else can we generate instead?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants