Best practices for third party / external components

[naturalethic]

Is there a current best practice for wrapping third party component libraries in view so that they will react to changes in state properties?

[solkimicreb]

Sorry for the super late response.

I think I see your issue, but an example would be really helpful. External libraries are usually written in a way that they update when you change their props. They rarely expect to be updated based on deep prop mutation.

In case they somehow depend on these cases, a dirty workaround would be to 'use' the passed down piece of state in your parent component too, to make it re-render itself and the 3rd party child on mutations. Like this:

import { ThirdParty } from 'third-party'

const MyComp = view(() => {
  // imitate using user.name here, if you would like ThirdParty to re-render on name changes
  const dummy = appStore.user.name
  return <ThirdParty user={appStore.user} />
})

Another possibly more elegant way would be to create shallow clones, which basically converts easy-state's mutation based change detection to React's reference based detection.

import { ThirdParty } from 'third-party'

const MyComp = view(() => {
  // this uses every property of the user while cloning it, so it re-renders both components on user mutations
  const user = Object.assign({}, appStore.user)
  return <ThirdParty user={user} />
})

[vineeth-cnbr]

Is there a way to use react-easy-state with 'react-cookie'? Inorder to use react-cookie, you need to wrap the component with 'withCookies(Comp)'. i want to use both easy-state and cookies in the same component.

[naturalethic]

Do you absolutely need cookies? Or could use use session/local storage? If so you could try https://github.com/solkimicreb/react-easy-params instead, which complements this package.

Otherwise, you can try just double wrapping like this:

withCookies(view(comp))

[vineeth-cnbr]

Yeah, i would prefer cookies. Currently, I've shifted to using local Storage. i had tried Double wrapping, it did'nt work. ANy workaround similar to what @solkimicreb suggested above?

[solkimicreb]

Hi! Sorry for the long silence, I was on holiday.

What kind of error do you get when you double wrap? Did you try double wrapping with "both order"? It is strange that it is not working with double wrapping.

[vineeth-cnbr]

It's alright!

withCookies(view(App)) worked. It was showing errors before. But i may have been mistaken.

view(withCookies(App)) didn't work. It showed an error saying

Comp is not defined

Thanks Guys! @solkimicreb @naturalethic

[solkimicreb]

This question has a new dedicated docs section now. I am closing this issue, feel free to reopen if you have more related questions.