Flex Renderer Recycling

Thought it would be useful to just mention about renderer recycling 'feature' that is inherent in the Flex UI control handling.

Often this could burn your time if not handled properly at the time of building your application.

The Problem:
When you scroll through a list control which has a huge list of items and is bound with an itemRenderer, the items in the list control tend to shift its positions randomly, as you scroll.

The Reason:
Flex by default tries to reuse the item renderers. In other words lets say your list control has about 40 items. It is not necessary that Flex would generate 40 itemRenderers to display the list.
Instead, based on the display area available, it would generate a few itemRenderers, just enough to handle the current display area and probably a few more for buffering.

As the users scroll through the same itemRenderers get reused and the contents that need to be displayed, in other words the next item data will be rewritten onto that itemRenderer.

So in total the creationComplete event on the item renderer would just fire once and it is not necessary that it would fire for every item added to the list again because of this reusing concept.





The Solution:
Override the set data function on your itemRenderer which would give you access to the actual item that is being bound to the itemRenderer at that point in time, and in this function you could take care of binding the item the way you want.

The set data is bound to get called many times during the process of creation/change resize etc...
For an example of overcoming the renderer recycling issue and how to override the set data function, check the example here.