React / General

React watercooler

The React watercooler

Welcome to the React watercooler, a space for general chat with everyone in the community. Jump in to the conversation below or introduce yourself!

Load previous messages

May 28, 2018 · 7:07am

Could you provide a quick example?

  • reply
  • like

May 28, 2018 · 9:27pm

```

// Some component

<Provider>

<ParentContainer>

<ChildContainer>...</ChildContainer>

</ParentContainer>

</Provider>;

// Elsewhere withinW ChildContainer hierarchy

<Root>

<Consumer>

{props => {

const result1 = someProcessing(props);

const result2 = anotherProcessing(result1);

return <Leaf {...result2} />;

}}

</Consumer>

</Root>;

```

There is no way to get rid of the {props => ...} stuff, unless you extract it into a function:

```

function renderLeaf(props) {

const result1 = someProcessing(props);

const result2 = anotherProcessing(result1);

return <Leaf {...result2} />;

}

<Root>

<Consumer>

{renderLeaf}

</Consumer>

</Root>;

```

This is fine, and we use similar kind of structure in other cases as well, for example when rendering lists:

```

renderItems(items) {

return items.map((item) => {

...

return <Item key={key}>...</Item>;

});

}

<List>

{renderItems(items)}

</List>

```

but it's not this panacea everyone makes `renderProps` to be. In many cases a regular old component would do just fine.

For instance, why was React Context's `Consumer` not a regular component, just like Provider is?

This is its TS:

```

type Provider<T> = ComponentType<ProviderProps<T>>;

type Consumer<T> = ComponentType<ConsumerProps<T>>;

interface Context<T> {

Provider: Provider<T>;

Consumer: Consumer<T>;

}

```

where `ProviderProps` and `ConsumerProps` are:

```

interface ProviderProps<T> {

value: T;

children?: ReactNode;

}

interface ConsumerProps<T> {

children: (value: T) => ReactNode;

unstable_observedBits?: number;

}

```

I wonder whether `Consumer` could have been implemented in the same manner, but simply:

1. requiring one child (in the same manner React Router `Switch` does)

2. injecting the `value` from `Producer` into the `props`

  • reply
  • like

Ah, goddamit with no-edit ...

  • reply
  • like

Screw it, you guys. I am going home:

  • reply
  • like
  • reply
  • like

May 30, 2018 · 4:25am

I'm honestly still trying to figure out the pros / cons of render props. It seems like with render props you have a bit more information when looking at a render method. However, I kinda like making my render methods not know a lot about what's going on and just feeding them their dependencies. In that sense, I quite like HOC's and recompose

  • reply
  • like

I haven't really come up on many of the purported problems that HOC's had in the first place.. Maybe when I do I will "see the light"

  • reply
  • like

it's starting to seem more and more like "style" rather than "best practice".. I'd love if someone could learn me otherwise tho :)

  • reply
  • like

render method sometimes force me to split a component into multiple because when nesting them they become unreadable pretty quick because of seemingly infinite nesting.

  • reply
  • like

Composing higher order components, on the other hand, does not do that but brings the possibility of prop name collisions. It's all a trade-off and i like both for what they are. There's no silver bullet!

  • reply
  • like

And all that without talking into account the un-debuggability of that stuff. So, in order to be able to actually debug the damn function (which, most likely was written as someone else and is an arrow function and doesn't have a name in the stack)... you have to extract it into a method. But wait, you are supposed to write mostly functional stateless components. There are no methods. Now you have to create a sibling function and close over it in your functional component....

So, your best case scenario looks like this:

function someInnerFunction (props) {
    ...
}

function MyAwesomeComponent() {
    return (
        <Consumer>{someInnerFunction}</Consumer>
    );
}

This is soooooo different from this:

<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{#noop}}{{body}}{{/noop}}
</div>
</div> Handlebars.registerHelper('noop', function(options) {
return options.fn(this);
});

Dammit... why did I ever leave 2008.

Boggles the mind. Instead of doing the vaunted componentization (which is still not a word, according to Google Chrome), we are going helpers.

  • reply
  • like

Oh, and you are required to use PropTypes for renderProps, for whatever reason.

  • reply
  • like

I think @getify really has a point in his Functional-JavaScript Light book (highly recommended read btw: http://FLJSBook.com) when he talks about how hard arrow functions are to debug because they don't have names and he always uses the function keyword for that reason

  • reply
  • like

I don't think your best case scenario is entirely fair, in reality it'd look like this:

  • reply
  • like
function MyAwesomeComponent() {
return (
<Consumer> {function renderConsumerChildren(props) {
...
}} </Consumer>
);
}

Which is honestly not much worse than using arrow functions there.

  • reply
  • like

Not much better either. You don't think it a digression from the nice component direction we had going there for a minute...

  • reply
  • like

June 12, 2018 · 2:56am

Are all JavaScript async functions expected to return a promise? Should they support callbacks or no? What is the standard for async functions?

  • reply
  • like

I'm not too sure what you mean with "support callbacks", though

  • reply
  • like

Something like:

async function myFunc(arg1, callback) {
  try {
    const res = await somethingAsync(arg1);
    return callback(null, res);
  } catch (e) {
    return callback(e, null);
  }
}

  • reply
  • like

The context of my question is that i'm updating an api that had a function that did some async stuff then returned a callback. We were updating the api and I wrote some code like my previous message. When I looked at it and ran it, it worked fine. But as you confirmed @codepunkt async functions should return promises not callback functions

  • reply
  • like

Async functions automatically return promises, e.g. async function myFunc() { return 42 } returns a Promise that resolves with 42

  • reply
  • like

So in your myFunc example, it should return a Promise that is either resolved with the return value of your callback invoked with res, or the return value of your callback invoked with the error

like-fill
1
  • reply
  • like

you could try re-throwing in your catch, so that the promise returned by myFunc is actually rejected - e.g. catch(e) { throw new Error(callback(e, null)) }

  • reply
  • like

Seems convoluted, though.

  • reply
  • like

June 13, 2018 · 12:55am

Okay thank you!

  • reply
  • like

June 15, 2018 · 5:52pm

Hi! I'm new here.

  • reply
  • like

I am not very good at social stuff. Is trying hard to be part of a community lame?

  • reply
  • like

June 16, 2018 · 6:16am

I am not very good at social stuff. Is trying hard to be part of a community lame?

Nope. Welcome.

like-fill
1
  • reply
  • like

June 16, 2018 · 7:29pm

Hi guys, my name is Jithesh. Can anyone suggest a good form validation library for react?

  • reply
  • like

June 17, 2018 · 11:58am

@jitheshkt have you checked yup yet? https://github.com/jquense/yup

like-fill
1
  • reply
  • like

June 18, 2018 · 8:21am

its okay here to ask about react-native ?

  • reply
  • like

Sure!

  • reply
  • like

June 18, 2018 · 9:18pm
👀
  • reply
  • like

June 20, 2018 · 9:53am

I’m sure I saw somewhere that there was an accessible component library, can’t find it now! could anyone point me in the right direction?

  • reply
  • like

June 20, 2018 · 9:31pm

I’m sure I saw somewhere that there was an accessible component library, can’t find it now! could anyone point me in the right direction?

There are a bunch.. two I know of are Blueprint from Palantir: http://blueprintjs.com/docs/v2/#core/accessibility, Gromett: http://grommet.io/docs/components

  • reply
  • like

June 22, 2018 · 6:22am

Thanks Adi

  • reply
  • like

June 22, 2018 · 10:20pm

Friends! I have verbally accepted a contract offer with Facebook Business Systems, pretty stoked. I appreciate the wisdom this community has held during the journey to join… the mothership

like-fill
2
  • reply
  • like

June 23, 2018 · 5:50pm

Congrats, Jack!

  • reply
  • like

June 26, 2018 · 2:37am

Does anyone know how to write tests for code using IntersectionObserver in jest?

  • reply
  • like

@akshay-nair I don't think it's doable at the moment see: https://github.com/jsdom/jsdom/issues/2032

  • reply
  • like

jest uses jsdom which is only an approximation of a real DOM. It doesn't do layout.

  • reply
  • like

you'll notice you can't get the real dimensions of an element either as seen here: https://stackoverflow.com/questions/19914111/get-dom-elements-actual-width-using-jsdom

  • reply
  • like

Hello, I was making my own component library using very basic React. Was wondering if there is any way I can show the component's JSX and CSS file automatically ?

  • reply
  • like

SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

  • reply
  • like

June 27, 2018 · 3:46pm

Hello, I was making my own component library using very basic React. Was wondering if there is any way I can show the component's JSX and CSS file automatically ?

I have this article loaded in a tab, that I think may teach to do exactly what you need. I'm waiting to have time (and coffee) to read trough it but maybe it will be helpful to you: https://medium.com/@tomaszmularczyk89/guide-to-building-a-react-components-library-with-rollup-and-styled-jsx-694ec66bd2

  • reply
  • like

SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

That happens when you load an image into the canvas that comes from another domain. The bowser blocks toDataURL after that. In the past I had to build a simple cross domain proxy to deal with that.

like-fill
1
  • reply
  • like

June 30, 2018 · 4:58am

I have this article loaded in a tab, that I think may teach to do exactly what you need. I'm waiting to have time (and coffee) to read trough it but maybe it will be helpful to you: https://medium.com/@tomaszmularczyk89/guide-to-building-a-react-components-library-with-rollup-and-styled-jsx-694ec66bd2

Thanks @soska. The article is great. Although what I want is the ability to show the JSX and CSS code in the page itself. I am kind of making a UI Component library which would be used by different devs in different frontend setups.

  • reply
  • like

July 8, 2018 · 8:18am

Thanks @soska. The article is great. Although what I want is the ability to show the JSX and CSS code in the page itself. I am kind of making a UI Component library which would be used by different devs in different frontend setups.

Have you looked into using [mdx](https://github.com/mdx-js/mdx) ? It won't show the source code when rendered, but a link to the original file would show how to use the API you're providing.

  • reply
  • like
Your message here...

*bold*_italic_`code````codeblock```